Google Chrome Developer Tools Crashing on Particular Site
TL;DR – The crashing was caused by invalid CSS. Run the CSS through a validator and fix any invalid CSS.
Longer Answer – The ‘Inspect Element‘ feature within Google Chrome is constantly in use in our office. It’s difficult to imagine working on a site without it now-a-days, saving us hours upon hours of development and debugging when things aren’t working how they should.
When working on a site recently we had a very odd error whereby whenever we would open the developer tools to inspect elements in Chrome we’d get the ‘Aw Snap’ page:
It was only happening on a specific site, and was also happening on every computer here in the office, so we knew it wasn’t something specific to the PC being used.
To debug the problem we removed all of the code and added bits back in piece by piece. With no code in place we were able to use the developer tools with no issues. As soon as we added the header back in though we started to get the errors again. We knew it had to be something in the header of the site.
Continuing with this method we kept removing bits, then adding bits in until we were able to clearly identify what line was causing the issue:
<link href="/css/responsive.css" rel="stylesheet" type="text/css" />
Ok, so we now we knew it was something to do with the CSS. But what…
After running the CSS in question through a CSS validator it was apparent we had some parse errors in our CSS.
After fixing the errors reported by the validator (in our case, invalid media queries), we were able to use the developer tools again with no issues.