Chrome Dev Tools Cheatsheet

chrome-dev-tools-cheatsheet.js

// Switch Colour Representation (HEX -> HSL -> ...)
Shift + Click on the colourpicker

// Search DOM-Nodes by CSS classnames
Cmd + F -> ".hidden p"

// Jump to a specific line
Cmd + P -> ":39"

// Open a File by searching for the filename
Cmd + P -> "app.js"

// Scroll to a specific function by searching for the function name
Cmd + Shift + P -> "onClick()"

// Create a breakpoint in the .js file
function onClick() {
  debugger;
  this.animate();
}

// Log text AND an objects internals seperated by a comma
> console.log('My Object is: ' + obj);
My Object is: [object Object]

> console.log('My Object is: ', obj);
My Object is: {id: 3, name: "Peter", ...}

// Show local modifications that have been made in dev tools
Right Click on the files text -> Local Modifications...

// Save local modifications by simply replacing the original file on the filesystem
Right Click on the files text -> Save as...

// Log counts
> console.count('Animation started');
Animation started: 1
Animation started: 2
...

// Group logs to one expendable line in console
> console.groupCollapsed('Adding Character' + this.displayName);
...
> console.log('init character');
...
> console.log('render character');
...
> console.groupEnd();

// Show the time that a function needs to be fully executed
> console.time('Adding a character');
...
> console.timeEnd('Adding a character');
Adding a character: 22.041 ms

// Run Snippets of code (see: https://bgrins.github.io/devtools-snippets/ for ready to use snippets)
Dev Tools Tab "Snippets" -> Right Click one Snippet -> Run

// Edit ALL THE TEXT directly on the page (HTML5 feature, nice for testing out longer names for i18n)
> document.body.contentEditable = true;

// Disable Cache when Dev Tools is open in general
Settings -> General -> Disable Cache (while DevTools is open)

// Show timestamp for every console.log()
Settings -> General -> Show timestamps

// Enable other themes on Dev Tools (e.g. Dark theme)
Settings -> Experiments -> Allow custom UI themes

// Test app with limited network capacity
Toggle Mobile -> Network -> 3G/WiFi/DSL/Offline/... -> Reload Page

// Show Time and Latency of a HTTP request in the Network Tab
Latency = Time waiting for a response (important to look at: A high Latency indicates a server scale or network problem)
Time = Latency + Time to render/parse the file

// Save Network history as .har file (good for testers, they attatch a .har file to every problem they've experienced)
Right Click on the Network history -> Save as HAR with content

// Show Network history by importing a .har file
http://ericduran.github.io/chromeHAR/

// Timeline to determine memory leaks
Open the Timeline Tab -> Click "Start Record"
-> Do one Operation a couple of times otherwise its hard to see the leak
-> Click "Collect Garbage" a few times just to make sure that it is collected
-> Click "Stop Record"
-> Deselect all but "Nodes" (cause they are usually leaking)
If the number of Nodes continually increases there is a memory leak!
They are not on the DOM but they are still in memory 

// Create CPU profile of to determine functions that consume excessive CPU resources
console.profile('calculation x');
...
console.profileEnd(); // Stops the current JavaScript CPU profiling session, if one is in progress, and prints the report to the Profiles panel.

// Open Dev Tools Shortcut
Cmd + Alt + i

// Drop to Frame / Restart Frame -> Set program couter to the beginning of the function scope
Right Click on a function in the call stack -> "Restart Frame"

// Add conditional breakpoint
Right Click on a line number -> "Add Conditional Breakpoint..."

// Add DOM Breakpoint that breaks on one of the DOM-Nodes attributes changes
Inspect Element -> Right Click the node -> "Break on..." -> "Attributes Modification"

// Add XHR Breakpoint that breaks on a specific URL is called via XHR
Sources -> "Add XHR Breakpoint" -> Enter specific URL i.e. '/user'

// Toggle Event Listener Breakpoint that breaks on a specific Event i.e. "mousemove" or "keydown"
Sources -> Event Listener Breakpoints -> Toggle Event Listener Breakpoint

// Unminify/Pretty Print/Beautify JS Code in Chrome
Open the .js File -> Click the "{ }"-Button in the bottom toolbar

// Create debuggable Code Snippets
Sources -> Snippets -> Right Click -> "New"

// Pause on [caught] Exceptions to figure out why an Exception was thrown
Sources -> "|| Pause on Exceptions"
[-> Click Checkbox "Pause on caught Exceptions" to additionally break on already caught Excpetions]

// Execute JavaScript (<= 512 characters) from Bookmark(let): Type the following in the URI of the bookmark
javascript:(function() { console.log('hello'); })();
// When more than 512 characters are required create a <script src="bookmark-code.js"> in the function

// Shortcut to search across all sources
Cmd + Alt + F

// Break on native functions by overriding the native function and add a debugger; statement
Event.prototype.preventDefault = function() {
  debugger;
  return _original.apply(this, arguments);
}

// Work with recently inspected DOM element in the console. It reveals a history of last selected DOM elements.
Inspect/Select DOM Node in the Elements Tab ->
console.log($0); // logs the last selected element
console.log($1); // logs the element prior selected to the last selected element
...

// Retrive elements with shortend "document.querySelectorAll()" function name alias $(selector);
$('body .content-section');

// Retrieve all event listeners on a DOM element from console
getEventListeners($0);

// Monitor events of DOM elements in console
monitorEvents(document.body, 'mouse');
...
unmonitorEvents(document.body);

// Possible arguments are:
[mouse, key, touch, control]

// These event types map to the following events
{
  mouse: [
    'mousedown',
    'mouseup',
    'click',
    'dblclick',
    'mousemove',
    'mouseover',
    'mouseout',
    'mousewheel'
  ],
  key: [
    'keydown',
    'keyup',
    'keypress',
    'textInput'
  ],
  touch: [
    'touchstart',
    'touchmove',
    'touchend',
    'touchcancel'
  ],
  control: [
    'resize',
    'scroll',
    'zoom',
    'focus',
    'blur',
    'select',
    'change',
    'submit',
    'reset'
  ],
  no_arguments: [
    'all of the above',
    'load',
    'unload',
    'abort',
    'error',
    'select',
    'change', 
    'submit',
    'reset',
    'focus', 
    'blur', 
    'resize', 
    'scroll', 
    'search', 
    'devicemotion', 
    'deviceorientation'
}

// Break on property access by adding a setter method with a debugger; statement
var user = {
  name: 'klaus'
}

user.__defineSetter__('name', function(value) {
  debugger;
});

// Async call stack to see a complete call stack for async callback functions
// It saves the prior state of the programs variables
// -> watch expressions show the value associated with the time of the async call stack section
Sources -> Check "Async" checkbox on the call stack section

// ES7 proposal: Break on object mutation (add/change/delete property)
Object.observe(user, function(changes) {
  changes.forEach(function(change) {
    console.log(change.name); // the name of the changed property
    console.log(change.object); // the changed object after the change was made
    console.log(change.type); // add/update/delete
    console.log(change.oldValue); // the value before the change (only for update/delete types)
  });
});
    
// Go into "Design-Mode" to directly edit text on the page i.e. to check longer text
document.designMode = 'on'