I recently gave a talk on developing JavaScript with the Chrome DevTools and this is a list of the mentioned resources. These include several links to Googles own excellent DevTools documentation.

I plan to curate this list as time goes by, topics arise, change and new resources appear.


General resources

  • DevTools Snippets

    A collection of helpful snippets to use inside of browser devtools.

Screencasts and videos


Chrome DevTools Command Line API

The Command Line API is a collection of functions for performing common tasks with the Chrome Developer Tools. These include convenience functions for selecting and inspecting elements in the DOM, stopping and starting the profiler, and monitoring DOM events. This API complements the Console API, the Command Line API is only available from within the console itself.


Breakpoints

A breakpoint is an intentional stopping or pausing place in a script, put in place for debugging purposes.


Keyboard Shortcuts

The DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow.


Debugging Events

The DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow.


Exceptions

Exception handling is the process of responding to the occurrence of exceptions - exceptional situations that require special processing - often changing the normal flow of your JavaScript code’s execution.


Other Tips and tricks

There are many power tools at your disposal when using the DevTools, some of which are more obvious than others. In this guide, we will highlight some of those great tools, tips and tricks that are less well known.

After a recent talk on the Chrome DevTools I was asked about my JavaScript resources. This is a list of my favourite articles, podcasts, newsletters etc. I plan to curate this list as time goes by, topics arise, change and new resources appear.


Newsletters


Podcasts


Books

  • Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript

    […] an in-depth look at the JavaScript programming language and how to use it effectively to write more portable, robust, and maintainable applications and libraries.


Special topics

Promises

Podcasts

Articles

Talks

On a recent web project at work I was using box-sizing: border-box on all elements for the first time. As Chrome is my main development browser these days (and probably soon will be replaced by Canary), I only had a a late look on the site with Firefox. I discovered that the height of some elements was going crazy. More precisely: the elements which I used min-height on were way too high.
Some Google research on “firefox min-height bug problem” did bring the connection between box-sizing: border-box, min-height and padding. Turns out that there is a known bug regarding these topics within Firefox since ages some time: If an element is using (vertical) padding, min-height and box-sizing, Firefox simply adds the padding to the min-height.
As open source has always an answer (don’t quote me on this one), Shane Tomlinson wrote a nice article on the height problem and developed a JavaScript function/test that detects if this cruel behavior is active in the current browser.
I did take his function a step further and used it in a Modernizr test.

To sum it all up:

Problem

Firefox has a known bug regarding elements with applied border-sizing:border-box, padding and set min-height. It adds the padding to the min-height, resulting in an element that is too tall.

Solution(s)

My JSFiddle embedded