Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Big source / minified files make Chrome Developer Tools freeze

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.

like image 495
Nighto Avatar asked Apr 04 '16 19:04

Nighto


People also ask

How do I debug Chrome from freezing?

Open the dev console - F12 on Windows/Linux or option + ⌘ + J on macOS. Select the Sources tab in chrome inspector. In the web browser window, hover over the desired element to initiate the popover. Hit F8 on Windows/Linux (or fn + F8 on macOS) while the popover is showing.

How do I expand all Chrome console?

Alt + Click to expand all child nodes - Chrome Developers.

How do I customize developer tools in Chrome?

Install Material Dev Tools extension from the Chrome store. Once the above extension is installed, again go to Settings. In settings under the Experiments tab, select Allow custom UI themes . Once it is enabled, now close and re-open the dev tools.


4 Answers

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.

like image 79
Nighto Avatar answered Sep 27 '22 23:09

Nighto


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

like image 39
Dmitrii Stebliuk Avatar answered Sep 27 '22 21:09

Dmitrii Stebliuk


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
like image 41
rwm Avatar answered Sep 27 '22 22:09

rwm


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
like image 32
Jeff Ward Avatar answered Sep 27 '22 22:09

Jeff Ward