Chrome New JS Debugging tool

Many front-end development engineers have a unique passion for chrome. The reason is simple: She started fast, efficient execution, to the web browsing to bring fluency and pleasure; second, she achieved a lot of new standards, support a lot of advanced properties, so that the Web experience better, more tall; I have to mention her debugging tools for the front-end development engineer is the right hand. However, probably because of the problem of obsessive-compulsive disorder, I today have a feature that I can not accept a bit ...

Because, my chrome turns on the auto-upgrade feature. So my chrome is always up to date and is my current version of the Chrome browser:

And recently, when I was debugging the code, I found out that there was something in her debugging tool--when we used the breakpoint debugging, the Chrome debugging tool output the variable directly next to the source code, and let's look at the effect:

Of course, this design undeniably has its good place: runtime variables are directly visible, easy to view, most of the time no longer need to move the mouse to the variable or even use the Watch function to view. But why would she make me feel uncomfortable?

I personally think that she also has a bad place: first, the output runtime variables in the source code, although there are color discrimination, but have to admit that will be certain to reduce the readability of the source code; second, it is not difficult to find that the output of the variable is separated by a comma immediately after the output, in fact, when the variable is not easy to view From the debugging space to consider, not suitable for one-time display too much information, especially considering the domestic development conditions, there are many small-screen equipment developed by the front-end engineers. So, at first I was not willing to accept this design, do not know that I feel the same as a small partner.

However, it's not as bad as it might seem. Fortunately, Chrome does not remove the ability to view variable information on a variable, and we can still take the original development habits for debugging. However, those "superfluous" information displayed there, always left my mind uncomfortable (obsessive-compulsive disorder), there is no way to kill them?

The answer is yes. As an effort to do a good user experience first go to the Google engineers, how can ignore the feelings of various developers, Chrome debugging tool gives us a very convenient way to configure whether to display this information, click on the Debug tool in the upper right corner of the small gear icon (set), we in the "General" The panel will see a configuration like this:

The meaning is clear: the value of the variable is displayed in the row during debugging. So I was decisive to cancel it, and then, my interface neat and clean, the heart is much more comfortable.

Of course, I write these words, not to explain that the new version of Chrome Debugging tools are not good, I just want to express for my obsessive-compulsive front-end developers, the new features may not be good, or it will take some time to accept the new operating habits. If you have friends like me, you can get used to it in this way.

Author blog: Hundred Yards villa

Chrome New JS Debugging tool