Make writing a habit together! This is the 13th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

After reading this article, you can learn other debugging techniques besides console.log

1. How to quickly locate online problems?

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

I will introduce to you two ways to locate:

Method 1: Use$0.__vue__

Steps:

  1. The first thing you need to do is select the outermost div of the vue component you want to look at in “Element”. For example, the outermost div of my component is classrefi-optionsDiv, select it;

  1. Then type it in the console$0.__vue__;
  2. Some data in the component is printed (you can see data, computed, and Methods);

  1. Some functions can also be triggered via fetch.

Method 2: Enable Vue DevTool online

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

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 the code

Copy this code to the console for execution, and vue DevTool appears! (Sometimes there may be a delay, forcing the page down, or restarting the console will appear)

Second, the debugger

You can hit the debugger in code

Make a breakpoint in the code, as shown below:

With this breakpoint, code execution will pause at this point.

You can add the debugger by clicking code in Source

You can see the use of the diagram in detail ~

How to make a request repeatedly:

Trying to trigger a request while stupidly refreshing the page? Not too! In network, select the request you want to re-initiate, right-click it, and select “Replay XHR” to trigger it again. As shown in figure:

Copy method:

Sometimes we need to copy some data, but we need to format? In the console, convert the format first and then call copy directly. After calling copy, the data you want to copy is already in the clipboard. Paste the data directly and use it

let object = {
    a: "test"
}
copy(object)
//{a: "test"}
Copy the code

These are some of the debug tips I usually use, you can check out the chrome official developer documentation, there are many interesting tips, master it, will make our development efficiency greatly improved!