Post on 18-Jul-2015
ChromeDevTools
by Juan Obando
0
About meJuan ObandoSoftware Engineerfrom Universidaddel Valle
ExperiencePHP, RubyMySQL, PostgreSQLGitHTML, CSS, JavaScriptServer administration: Linux &Windows
Interests
https://github.com/juanchopx2/chrome-devtools-slides.git
AgendaBasic tips and tricksUsing the Console APINetwork timelineMobile emulationTerminal on DevTools
Basic tips andtricks
Use Chrome Canary!
Useful SettingsDisable cacheLog XMLHttpRequestsColor format as authoredEnable DevTools experiments: #enable-devtools-experiments
Ctrl (⌘ for Mac) + Shift + C to inspectDrag and drop elementsForce element state“Break on...” and breaking points
Using theConsole API
Writing to the console console.log("Nothing new so far! :@");
Warning and Errors console.warn("This might be new!");console.error("and maybe, this one too");
Grouping output console.group("Just reminding some tips about console");console.log("Nothing new so far! :@");console.warn("This might be new!");console.error("and maybe, this one too");console.groupEnd();
String substitution and formatting console.log("%s %i of times!", "Nothing new! Have seen this", 1000);
Styling console output with CSS console.log("%cStylish output", "color: #ff0000; font-size: 16px;");
Listing all element properties console.dir(document.body);
Measuring how long something takes console.time("Measuring");// your code hereconsole.timeEnd("Measuring");
Network timeline
Size/Content columnTime/Lantency columnInitiator columnHAR format: HTTP Archive Format
Mobile emulation
Terminal onDevTools
1. Install chrome extension2. Install 3. Install devtools-terminal package
4. Run devtools-terminal tool
Devtools Terminalnode.js
npm install -g devtools-terminal
Questions?
Thank you!