Client-side Debugging. Gary Bettencourt

Transcription

1 Client-side Debugging Gary Bettencourt

2 Overview What is client-side debugging Tool overview Simple & Advanced techniques Debugging on Mobile devices

3 Overview Client debugging involves more then just debugging JavaScript Layout issues What css is being applied to elements Structure of the DOM Modern web apps make heavy use of DOM manipulation, viewing source doesn t always help Update style/structure in real-time to test changes Instead of re-compile, refresh to test Networking problems Timing Slowness What information is being sent to/from server Headers, Cache

4 Overview Client debugging involves more then just debugging JavaScript Profile code to find performance issues Both CPU and memory Console output to view log messages Resource usage What s in cookies What s in local/session storage Emulate mobile devices Change user agent Emulate touch events Change resolution

5 Browser Support Internet Explorer Starting with IE9, built-in tools, used to be separate download IE11 should have much improved tools

6 Browser Support Chrome Built-in, has always been very good Many extensions available

7 Browser Support Firefox Early on firebug was preferred method (still available, and widely used) Has had built-in tools for a while now

8 Debugging Simplest mode of debugging is to log messages Early on people littered their code with alerts Then tools like firebug, others came along that provided an API that would output messages to a div/window Now every modern browser has a console console.log( button clicked );

9 Debugging Our code logs debug messages if debug flag is turned on Can turn on from code (Page Create for instance) Td.Util.debug = true Or by specifying query param MyPage?_debug=true Useful for seeing when binds are updated, and with what value. When operations are being invoked

10 Debugging Demo console debug

11 Debugging Debugging Script Just like regular debuggers you re used to Set breakpoints Evaluate expressions View callstack, locals

12 Debugging Layout Issues Inspect elements Toggle styles Change styles Update attributes

13 Debugging Network Issues Inspect requests View request/response headers Status codes Timing Helps with async requests, see which comes back first etc.

14 Debugging Working with minified JavaScript Common to see JavaScript code ran through a tool to make it lightweight Pages download/run faster Removed whitespace, shortens variable names Combines multiple-files into one Overhead in requesting multiple files. Single request is faster.

15 Debugging Example of running td.js through Google closure compiler

16 Debugging Downside: hard to debug New technology called source maps solves this problem Compression tools can create maps, which debuggers can use to locate symbols in the original source files Jquery, and TD Mobile JavaScript support source maps

17 Debugging Demo Layout/Network Debugging & Source Maps

18 Mobile Debugging Most mobile devices share same code base as their desktop cousins Android -> Chrome ios -> Safari Windows -> IE Developer tools allow emulation of user agent, orientation, events But there still might be cases where debugging on actual device is necessary Timing issues might arise, slower network, CPU, less memory Touch events, vs. mouse clicks Screen resolution

19 Mobile Debugging Most devices have debug cabability ios has remote debugging, but Safari support on Windows is not good Android has USB debugging support, Chrome extensions available to enable remote debugging

20 Mobile Debugging Android (4.3) Turn on development tools: Go to Settings -> About. Click on Build Number 5 times. This will unlock developer tools You ll see Developer Options under settings now Turn on USB debugging Go to Chrome (on device) -> Settings -> Developer Tools Turn on Enable USB Web debugging

21 Mobile Debugging Chrome Desktop Download install Android SDK Download install Chrome ADB plugin When device is connected to PC, grant permission for USB debugging

22 Debugging Demo Source Mobile Debug

23 Questions?