Chrome Dev Tools
För skräckslagna
Gustav Jorlöv
What are we using?
Answer: stuff that comes to clients
IDE?
IntelliJ
Eclipse
Visual Studio
...
What stuff comes to clients?!
HTML / CSS / JavaScript
Images / files...
Web server
Magic browser processing
Usable Website!
"View source"
"Dev Tools"
Front end debugging?
- alert("nifty comment");
- console.log("even better");
- console.log(obj.ect);
- update code >> update page
Dev Tools!
- Menu >> Tools >> Developer Tools
DOM
nodejs.org
CSS
http://nodejs.org/api/fs.html
Console
- REPL: Write code!
http://nodejs.org/api/fs.html
Debug code
http://secure-fortress-5095.herokuapp.com/
Network
http://secure-fortress-5095.herokuapp.com/
Emulate Mobile
http://www.smashingmagazine.com/
Timeline
http://www.aftonbladet.se/
http://secure-fortress-5095.herokuapp.com/
Plugin: PageSpeed
http://www.smashingmagazine.com/
http://www.aftonbladet.se/
DOM
Style
Console
Debug
Network
Timeline
Emulate Mobile
PageSpeed
Chrome Dev Tools
By Gustav Jorlöv
