I've been using Google Chrome developer tools for a while now, but today I decide to dig deeper.
the dev tools home page links to a Google i/o video walking through the latest and greatest for dev tools.
My notes:
the dev tools home page links to a Google i/o video walking through the latest and greatest for dev tools.
My notes:
- remote debugging (see the docs)
- quick select for file (CTRL-O or CMD-O that's an oh not a zero)
- somefile.js:400 will take you to line 400 on somefile.js
- view functions defined in a file (CTRL-SHIFT-O or CMD-SHIFT-O again that's an oh not a zero)
- the ability to make changes in dev tools and have those changes reflected in source (see DevTools Autosave)
- timeline snapshot frame mode can tell what is taking to long to give the sense of something being "slow". A frame is the full amount of time the browser requires to render the HTML, do CSS selection, run JavaScript, etc. The baseline of 60 Hz, that's 60 frames per second or about 16ms per frame.
- Not surprisingly, event listener memory leaks, are a point of concern.
- you can use timeline to see your memory footprint grow, then use profiles to take heap snapshots.
- shallow size- the size of the object itself
- retained size- the total size of the object and everything it refrences
- use 'Comparison' to compare between snapshots
- $0 to explore the currently selected element-- this works on the Elements tab as well as the Snapshots tab
- source maps -- when compiling with the closure compiler have it generate a source map. Then your page should include a link to the source map
- when deleting nodes via the Elements tab, CTRL-Z will undo the delete, the re-created node will be the same as it was before so JavaScript code will still work
- Chrome Canary is the daily updated Chrome. It can be installed alongside stable chrome.