Chrome Debugging
Contents
Official Document
https://developer.chrome.com/devtools
Tips
- Go to Incognito mode before debugging to prevent extensions to be involved in debugging.
- Under sources, local modifications are the list of changes we did in css, js files on the fly
Console Commands & JS
console
console.log('hi');
console.warn('hi');
console.error('hi');
console.debug('hi');
console.info('hi');
console.assert(10 == 5*2); // Only appears if it's false
console.group('step 1')
.....
console.groupEnd()
// Formatting
console.log("step %i", 1);
console.log("%c Some Text", "font-size:20pt;");
console.log(document) // as HTML console.dir(document) // as Java Object
console.time("Steps Time");
...
console.timeEnd("Steps Time");
debugger
it stops the execution and opens debug window
debugger;
selectors
$(css_selector) $$(css_selector) // returns all instances
inspect
inspect($('body'))
monitorEvents
monitorEvents($('h1'), "mouse") // captures the events realtime. "mouse", "key", "touch", "control" can be used
$0
brings up the element last selected in elements window.
it can be $1 $2 $3 etc.
Elements
Computed Style
it puts all styles together elementwise
Styles Tab
clicking pin will fixate the status of an element like hover active visited focus ...
Metrics
you can apply a style or see already applied styles for an element's margin, padding, border.
Saving Modifications
When you are working in a local file one way of getting all changes form chrome is to collapse to root node and use "copy as HTML"
for stylesheets there is a save / save as option.
Watch Expressions
When you type variable name here it displays the value real time
Call Stack displays function hierarchy that how we reach to a point in code.
Conditional breakpoints
Set a breakpoint and right click it, select "Edit breakpoint" and add a condition in this textbox
