Debugging JavaScript with Chrome

57 %
43 %
Information about Debugging JavaScript with Chrome

Published on April 20, 2014

Author: IgorZalutsky



Slides from my lightning talk at Frontend Dev Conf '14.
Wrap-up of dev tools for debugging provided by Google Chrome, including a few non-documented, but very handy ones.

Debugging JS with Chrome >The little power tools Igor Zalutsky

Async call stacks setTimeout(function () { $.ajax({ url: '' }).done(function(response) { debugger; }); }, 500);

Console API: the basics var obj = { prop: 1, child: { prop: 2 } }; console.log(obj); console.log('%On%o', document.body, document.body); console.warn('something unexpected happened'); console.error('something went wrong'); console.assert("str" instanceof String, 'gotcha!');

Console API: time() and count() function fibonacci(n) { return (n > 1) ? fibonacci(n - 2) + fibonacci(n - 1) : n; } console.time('fibonacci'); console.log(fibonacci(30)); console.timeEnd('fibonacci'); document.addEventListener('keydown', function(event) { console.count(String.fromCharCode(event.keyCode)); });

Console from the inside console.dir(console); ?

Console API: table() var people = [ { name: 'Hopper', surname: 'Herring' }, { name: 'Sampson', surname: 'Douglas' }, { name: 'Carmella', surname: 'Vincent' } ]; console.table(people); console.table( document.querySelectorAll('a'), ['href', 'text'] );

Console API: other methods clear() remove all previous output debug(), info() aliases for log() group(), groupEnd() grouped output profile(), profileEnd() last evaluated expression timeStamp() marking the timeline trace() stack trace

Digging out Command Line API (function() { debugger; })(); var members = Object.keys(__commandLineAPI) .filter(function(key) { return ! (key in console); }).reduce(function(obj, key) { obj[key] = __commandLineAPI[key]; return obj; }, {}); console.dir(members);

Command Line API: overview

Command Line API: shortcuts $(selector) document.querySelector() $$(selector) document.querySelectorAll() $_ last evaluated expression $0 - $4 last 5 inspected DOM nodes or heap entries $x(path) XPath query

Command Line API: monitoring events

Command Line API: hidden hooks

Command Line API: other methods copy(object) copies string representation to clipboard inspect(object) shows object in DOM inspector or profiler getEventListeners(object) returns hash of arrays of listeners profile(), profileEnd() last evaluated expression keys(object) same as Object.keys(object) values(object) returns array of object’s values

Thanks! Useful links > Google Chrome Console API docs > Google Chrome Command Line API docs > “Lesser-Known JavaScript Debugging Techniques” by Amjad Masad > “Advanced JavaScript Debugging with console.table()” by Marius Schulz Follow me! @igorzij

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Debug | Web Tools - Google Developers

Debugging helps you find and fix ... Remote Debugging; Using JavaScript ... The Chrome DevTools Console panel is your focal point for direct ...
Read more

Tutorial: Debugging - Google Chrome

Debugging JavaScript ... This tutorial introduces you to using Google Chrome's built-in Developer Tools to interactively debug an extension.
Read more

How do you launch the JavaScript debugger in Google Chrome ...

When using Google Chrome, I want to debug some JavaScript code. How can I do that?
Read more

Debugging JavaScript with Chrome - OdeToCode by K. Scott Allen

The Chrome Developer Tools are a bit quirky, but for script debugging I currently like them the best. Here is a quick brain dump on some areas of interest ...
Read more

Debugging Asynchronous JavaScript with Chrome DevTools ...

Up your JavaScript debugging kung fu with asynchronous call stack traces in the Chrome DevTools.
Read more

Debugging - Google Chrome

Basic debugging Writing messages to the JavaScript console. ... depending on their version of Chrome). Debugging PNaCl pexes (with older Pepper toolchains) ...
Read more

Debugging JavaScript using Breakpoints with the Google ...

Debugging JavaScript using Breakpoints with the Google Chrome Developer Tools ... Using Google Chrome Javascript Debugger - Duration: 6:10.
Read more

Debugging JavaScript in chrome - YouTube

chrome js debugger js debugging chrome debugging js using chrome debugging javascript with google chrome To debug JavaScript in Google chrome ...
Read more

Getting started with Javascript Debugger in Chrome - bits ...

Getting started with Javascript Debugger in Chrome; migrated; troubleshooting SSL cert with rbenv/ruby 1.9.3;
Read more

Debugging JavaScript Using Google Chrome - C# Corner ...

In this article I explain how to debug a JavaScript function using the Google Chrome browser.
Read more