In the last article, JavaScript has two quick debugging tips, some of which are still not enough, so let’s talk about some other tips 🐶

If you’re a front-end developer, you’ll spend half or more of your working day in the browser. Then we recommend you to use Google Chrome, which is one of the front-end development tools 🚀

Before we start, please update your Browser to the latest version.

As of this post, Google Chrome on my Windows is the latest version – version 85.0.4183.121 (official) (64-bit), Google Chrome for MAC – Version 85.0.4183.121 (Official Build) (64-bit)

Q: Why update?

Answer: One is to explain unified operation; Second, product upgrade will always solve some remaining problems, technology forward

Interested partners can check out the official website of the update record Google Web

Let’s get straight to the point 💓

This is all done in Chrome on the MAC. Much the same on Windows, please imagine

1. Allow repeated declarationsletandclass

Before the update, we used let or class to declare variables a second time on Google Chrome and got an error message. As follows:

let i = "jia"

let i = "reng"// Uncaught SyntaxError: Identifier'i' has aready been declared
Copy the code

Navigation bar => More ICONS => Settings => About Chrome => Update

After the upgrade, there is no error in the repeated declaration, which eliminates the problem of overwriting the same variable in console debugging in the same control panel.

2. Filter requests

The web request server sometimes makes too many requests and we want to know which ones are blocking. We can filter the requested network to locate the problem.

Control panel => Network => Filter icon => IS: RUNNING => Refresh the monitoring page

3. Expand all child nodes

When debugging DOM node elements, we need to expand and view each node. If we just click the child elements under the target element one by one to expand, it will take time. You can try the following shortcut ~

Control Panel => Elements => Press Option + to click the icon of the element to expand

4. Scroll elements to the view

When debugging the DOM element, we have focused on the relevant DOM structure, but the corresponding element is not displayed in the visual window, so we can quickly scroll it to the visual window.

Control Panel => Elements => Right-click the selected DOM node => Scroll into View

5. Preset devices

At the time of debugging, we didn’t have that much equipment on hand. In particular, the development of mobile terminal ape, in the absence of sufficient commissioning machine, we rely on debugging tools for simulation. Well, except for a few values for Google Chrome’s default devices, like iPhone X and iPad. We can also customize the devices we need.

Control Panel => Setting icon => Devices => Add Custom Device…

Let’s add a device with a size of 300 * 800 and a DPR of 3.

Later, when debugging the device, we can select the preset device to preview ~

6. Set the network status

We couldn’t control how fast people downloaded our product, so we had to simulate the performance of the product at different speeds to see if our optimizations were working as expected. Similarly, we can also customize the status of the network. Generally, the default value is Online.

Control panel => Setting icon => Throttling => Add Custom Profile…

7. Capture a snapshot

One of the principles of communication is to communicate with pictures and pictures. In keeping up with the nasty people to communicate, on the way to mull over a product, not without a screenshot of a product.

As a developer, are you still using screenshots or chat tools? We have a more convenient solution

7.1 Capturing a Full-screen Snapshot

Control Panel => Command + Shift + P => Capture Full size screenshot

Here is an image taken from my gold digger profile page. After entering the profile page, set it to mobile device debugging, and then execute capture Full size screenshot from the console as shown above to create a complete profile page image.

⚠️ does not limit the mobile debugging operation, PC side can also, here for the convenience of mapping, only select mobile debugging

Of course, we use partial screenshots more often, which brings us to the following tips.

7.2 Capturing a Local Snapshot

Control Panel => Review elements => Command + Shift + P => Capture node screenshot

I chose the nuggets profile picture part of the interception demonstration ~

After correct operation, the target audit element is captured, as shown below:

8. Quickly clear the site cache

Sometimes we need to clear the cache for debugging. Instead of manually clearing information one by one, it is better to clear the site directly 💨

Control Panel => Command + Shift + P => Clear Site data

Well, let’s stop there. I’ve written a lot

Wait, it’s only eight tips. We need to add 🐱

Because NINE is my lucky number.

9. Change the theme of the debug panel

In the development and debugging, the default theme is hard to avoid eye fatigue. And, as a developer, high cold, high cold, high cold… Dark tones are fine. Through the following operations, you can choose your own style.

Control panel => Setting Sets the icon => Preferences => Appearance => Theme

【 the 】

For more information, go to Jimmy blog and check out ε=ε= old (゜ _ ゜ロ゜;) ┛