在 Chrome 开发者工具中调试时，任何拆分冗长 JavaScript 的方法

Question

Recently I have to debug some JavaScript from a web site, which host around 70 JavaScript files. But some files appear only one line in Google Chrome Developer Tools, but the size of such files are more than 1MB.

You can think if you want to debug this kind of JavaScript with step-in or step-over or even step-out, you just get lost. I downloaded one of such files, and use online code beautify tools to make the JavaScript looks prettier, but I found the file is more than 36,000 lines after the code been beautified.

I want to know is there anything like Chrome extension or something built-in in Chrome Developer Tools to make the online JavaScript file looks better. For example, make the above JavaScript file from one line to 36,000 lines, so I can easily debug it.

By the way, not all the JavaScript files looks ugly from the same website, some JavaScript file, I can see there are hundreds of lines when doing debug, which is much better to do within only one line.

Answer 1

If you want to prettify the source file, just press the {} button at the left bottom, like in the image below (red square):

By the way, not all the JavaScript files looks ugly from the same website, some JavaScript file, I can see there are hundreds of lines when doing debug, which is much better to do within only one line.

Some files may have just one line because they are minified , but what is a minified file?

A minified file is a version without indentation and with short variables names. This method is widely used to decrease the file size and improve the user experience, since that file will take less time to load. If you are about to deploy a website, I suggest you a further reading about this topic.