Chrome Dev Tools for the uninitiated

As anyone who has done any web development for any length of time can tell you, web development can be hugely frustrating. If you've ever done the "Load page, check it in the browser, add alert to the javascript, save, reload page" cycle, this presentation will help tremendously. If you've used the Chrome Developer Tools before, you'll likely pick up a few new tricks as well.

Either way, we'll leave the old habits behind and speed your development through the use of some of Chrome's best development tools and workflows.

Transcript

1. JIM NANNEY - @JNANNEY PROJECT DATE CLIENT APRIL 10, 2014 CHROME DEV TOOLS FOR THE UNINITIATED
2. CHROME DEV TOOLS Elements Sources Console Debugging Awesome Meta Demos
3. ELEMENTS DOM Manipulation
4. ELEMENTS Styles Manipulation • Enable/Disable Properties • Edit Pseudo Class Rules • Link Directly to CSS Source
5. SOURCES Modify Sources Export to Disk Track Changes {} Pretty Print
6. CONSOLE Interact with Page Javascript and Object Browser Console.log(‘hello’) Console.log(console)
7. CONSOLE - Bling $ Useable for selecting inspect selects in the elements panel $0 last selection, $1 selection before, etc…
8. DEBUGGING
9. DEBUGGING Pause/Resume, Step Over, Step Into, Step Out Remove All Breakpoints Pause on Exception Pause on Uncaught Exception
10. DEMOS AND QUESTIONS
11. MORE INFO discover-devtools.codeschool.com ! atelierbram.github.io/syntax-highlighting/chrome-devtools/ ! THANKS FOR LETTING ME PRESENT!