Chrome Dev Tools
@knilob
Chrome Dev Tools
vs.
Firebug/Firefox
Chrome Dev Tools vs. Firebug/Firefox
- Don't fix what isn't broken.
- Feature parity is pretty even now.
- Even Firefox's Ionmonkey Javascript engine beats Chrome's V8 in some tests.
- Doesn't require a plugin like Firebug.
- Integrates with IDEs and editors.
- JetBrains WebStorm
- Sublime Text 2/3
- Adobe Brackets
Setting Up Your Environment
Setting Up Your Environment
Best to install Chrome Canary along with Chrome Stable.
- Chrome Canary gets you access to all of the latest enhancements.
- Canary updates every night. Things might break.
- Good idea to test in both Canary and Stable. Canary will become Stable in 12 weeks.
- Use chrome://flags to toggle the "Enable Developer Tools experiments".
- Add a local folder to your workspace
Inspecting HTML & CSS Elements
Inspecting HTML & CSS Elements
- How to open DevTools.
- Navigating the DOM.
- Viewing CSS selectors and applied styles.
- Editing HTML
- Drag and drop to reorder nodes.
- Live edit content.
- Editing CSS
- Edit individual element styles.
- Edit the entire CSS document.
Console Tips
& Tricks
Console Tips & Tricks
copy() = Grab string data.
inpect() = Jump to the current element in the Elements tab.
$0–$4 = References the five most recently selected elements.
$_ = References the last evaluated expression.
$(), $$(), and $x()
clear() = Wipes your console area clean.You can also inspect different frames.
Javascript Tools
& Sources Tab
Javascript Debugging
Sources tab displays the interface for the V8 debugger.
- Code on the left. Debugger controls on the right.
- Add breakpoints in the line gutter of the source code.
- Multiples
- Conditionals
- Don't forget about the debugger keyword.
- Able to blackbox files.
- Two useful options:
- Pretty Print
- Source Maps
Overview of the Resources Tab
Resources Tab
- Used to inspect local data sources used by your application:
- IndexedDB
- WebSQL
- Cookies
- Application Cache
- Local and Session Storage
- Other Page Resources
- Broken out by frames
- Images
- Fonts
- Etc…
Basic Overview of the Network Tab
Network Tab
- Allows you to figure out what's slowing your page down.
- Record Network Log tracks network requests as you navigate.
- Clear out results with the clear button.
- Filter results by type, status code, size (larger-than), domain, mime-type, etc…
- Waterfall view highlights DOMContentLoaded ($(document).ready in jQuery) and load ($(window).load or window.onload) event firings.
Useful Plugins
Useful Plugins
- Integrate into Dev Tools
- Google Analytics Debugger
- Javascript Framework Specific Plugins (e.g., Batarang for AngularJS)
- ScratchJS
- Other Language Specific Plugins (e.g., PHP Console, Xdebug Helper, RailsPanel)
- YSlow Page Speed Testing
- Generally Useful
- Cache Killer
- JSON View
- Wappalyzer