Tips for Front-End Debugging

Get into the habit of writing together! This is the 13th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the event details .

After reading this article, let you learn other debugging skills besides console.log~

1. How to quickly locate online problems?

After work, we often need to locate online problems that cannot be reproduced locally.

I will introduce two methods to my friends to locate:

Method 1: Use$0.__vue__

step:

1. First of all, you need to select the outermost div of the vue component you want to see in the "element". For example, the outermost div of my component is refi-optionsa div of class, select it;

2. Then type in the console $0.__vue__;
3. At this time, some data information in the component will be printed (data, computed, methods can be seen);

4. You can also trigger some functions through fetch.

Method 2: Open vue devtool in the online environment

In addition to the above method, there is a better way to temporarily open the online vue devtool.

var Vue, walker, node;
walker = document.createTreeWalker(document.body,1);
while ((node = walker.nextNode())) {
  if (node.__vue__) {
    Vue = node.__vue__.$options._base;
    if (!Vue.config.devtools) {
      Vue.config.devtools = true;
      if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
        window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);
        console.log("==> vue devtools now is enabled");
      }
    }
    break;
  }
}
复制代码

Copy this code to the console for execution, so that the vue devtool will appear! (Sometimes there may be a delay, and the page will be refreshed, or the console will appear after restarting)

二、debugger

You can play the debugger in the code

Hit a breakpoint in the code, as shown in the figure:

With this breakpoint, the code execution will pause here.

In the source, click on the code to add a debugger

You can see how to use it in detail~

3. How to repeatedly initiate a request:

Want to trigger a request and still refresh the page silly? Not too! In the network, select the request you want to re-initiate, right-click, select "Replay XHR", and you can trigger it again! As shown in the figure:

Four, copy method:

Sometimes we need to copy some data, but what if we need format conversion? In the console, convert the format first, and then directly call the copy method. After the call, the data you want to copy is already on the clipboard, and you can use the data directly by pasting it.

let object = {
    a: "test"
}
copy(object)
//{a: "test"}
复制代码

The above are some debug tricks that I usually use. You can study the official developer documentation of Chrome . There are many interesting tricks in it. Mastering them will greatly improve our development efficiency!