Google Chrome Dev Tools
Live edit page and inspect elements on a page
change html and css
console.warn("<any string>")
prints warning message .
add or edit attributes of an element
right click + edit as html
console.assert()
used for testing takes a boolean expression as parameter
Network optimizations
Minify the resources (.js, .css) and then have only one javascript file so that only one network request is required for that. Less network request more faster load.
Pause on exceptions icon (||) on the right
When an error occurs the code will pause. Then hover over a variable and you will get the value.
change element location
click and drag elements to change its location on the page
selecting elements on a page
click magnifying glass and hover over page
Dev Tools can prettify minified code
click on the { } at the bottom left under sources panel
how to re download and replace cache copies
click shift + refresh button
for javascript debugging
console is required interact with your app's views and scripts run javascript commands view log output
edit style values
double click on value to edit
How to see local storage in dev tools
find in resources panel
history of selected elements
$0 - most recent selected element $1 - before that $2 - before that and so on
disabling cache - this helps in debugging performance of web page
one way is use incognito 2nd way is click settings icon on the right and disable cache
Elements panel important note
All changes are temporary. To make changes to source files we have to use source panel
Alternative to document.querySelector("<any element id>")
Alternative is to use bling (console helper method) $("<any element id>")
Network Panel resources
Check if server has correct cache settings
how to enable and disable styles
Checkboxes next to style to enable and disable
Pausing only on uncaught exceptions
Click pause on exception icon again
Network Panel
Contains resource info - size, type ,etc Server response details Timeline of network requests
Timeline has Two other lines
Dom content loaded event line (blue)- browser finished parsing html file but still loading resources red line after this - when resources finished downloading
Tools for network optiminzations
Google Closure - does minification. PageSpeed plugin from google chrome web store
understanding the timeline of network requests.
Timeline represented using two bars The translucent bar shows latency of requests. (from when we asked for the resource to when it started the response) the solid part is the time taken to download resource different file types have different color timelines
304 status code means
browser has local cached copy of the resource request with itself and will use that one
Errors that pop up when reading data from local storage
can edit local storage in resources panel
toggle element state
change styles on hover, active, visited states
Meddling with CSS Styles
enable/disable,add new style properties edit rules on pseudo classes what file the style came from- breadcrumb trail.
Learn about Console API
https://developer.chrome.com/devtools/docs/console-api
Examining exceptions
in the console we get a stack trace along with file and line number
to find an element using console
inspect( $("<any element id>") )
You can see how much time it took to load a page
its at the bottom of network panel
Debugger break point
just click next to the line. execution pauses at breakpoint. Execution controls - resume (execution until next breakpt), Step over, step into, step out, de-activate breakpts
Sources panel
modify application source files export changes track file versions
how css style elements are written in dev tools
most specific comes first (inline styles) then rest.
Add a style to an element
select the element and click + button
Exporting changes done on source files
we get a star next to the name when we make any changes to source file. That means we need to save it to the browser's storage (not original source files). Right click and click save as to overwrite original file