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!