Big source / minified files make Chrome Developer Tools freeze

37
votes

Opening big JavaScript files, such as minified files on Chrome Developer Tools, tab Sources, makes it freeze. On a project of mine, if I click on jquery-1.11.1.min.js it hangs and I can't do anything other then close the tab. To make things even harder, Chrome remembers the last file opened on the Source tab, and remembers the last tab opened, so I have to open another website, fire up Developer Tools and change tabs in order to make it work on my project. I had to debug using Firefox instead of Chrome.

6
google-chromegoogle-chrome-devtools

6 Answers

21
votes

This is a known bug: Chromium Bug Tracker - Issue 593679 - [REGRESSION] DevTools: Big sources hang the Developer Tools, and it's currently fixed, but not available on regular/stable Google Chrome or Chromium.

The temporary solution is to use Chrome Canary.

9
votes

For me blackboxing is not working also. Helps only:

  1. Kill Chrome process that eats CPU (developer tools will be closed)
  2. Open any website without huge source files (e.g. ya.ru)
  3. Switch source tab to another
  4. Open Developer Tools on the target website (and do not switch to source tab)

Also I do not have this problem on Chrome Canary

8
votes

Chrome remembers the last file opened on the Source tab

This is how I worked around that, and got my sources tab back:

  1. Open devtools on a site other than the one that hangs it
  2. Ctrl + Shift + I to inspect the devtools itself
  3. Go to the Application tab then Local Storage
  4. Locate the previouslyViewedFiles key under devtools://devtools
  5. Press the delete key to delete the entry
6
votes

Update Sept 2020:

Just coming back to note that I tested Chrome stable 85.0.4183.121, and this is much improved! (I haven't tested in a while, so I'm not sure exactly when it improved. But there was some movement on the bug report in May.)

enter image description here

Sept 2019: Chrome 77 still has this problem.

Here's one way it happens:

  1. Open page, open debug tools
  2. Open your desired minified JS file, click the pretty format button.
  3. Set two breakpoints on line N and line N+1
  4. Refresh your browser. Hits first breakpoint quickly.
  5. Press resume / F8
  6. Takes 2 minutes to reach the next breakpoint.

Here's another way it happens:

  1. Open page, refresh a few times, all good
  2. Open debug tools, find file, pretty print
  3. Refresh a few times, still good
  4. Try to add a breakpoint in pretty formatted file...
  5. FREEZES, cpu pegged, can't click
  6. 140 sec later, tools responsive again
4
votes

Pretty printing the minified file (in the debugger, by klicking the {} button) seems to "solve" this (version 51.0.2704.103 m). Chrome will initially slow to a crawl, but click and give it a good number of seconds and it will calm down a soon as the pretty printed source is displayed.

0
votes

For me, my browser wasn't freezing until I tried to save a change to a large, minified JS file in the sources panel. Chrome Canary wasn't solving this problem for me like it had for others, but I was able to find a solid work around by using the "Local Overrides" feature in Chrome Dev Tools. https://developers.google.com/web/updates/2018/01/devtools#overrides

Chrome still crashed when I saved a change in dev tools to a javjascript file in the sources tab, but it did successfully save it to the overrides folder and i was able to see this change on my site after reloading Chrome.