Recently, I found that I was a little slow to get familiar with the project, and I could only use console.log when encountering problems. I can help some children to access the project as soon as possible. After all, it will make it easier and make you more relaxed. At the beginning of the project, it is very important to clarify the whole context of the project, because I just entered the job, and I don’t want to be so HHH, I ask my tutor every day, so the sorting is an entry-level debugging article.

Chrome Debugging Series

  1. Element panel

This panel will be used a lot, so let’s take a look at the numbers in the figure above

  1. Click on it and drop it into the page element to see the information for the selected element

  2. Click to enter the mobile terminal adaptation mode, you can change various models, and the current multi-terminal development is more popular, you can develop H5 ADAPTS to other terminals

  3. Here is the element selected by 1, you can view the width and height of the element, some basic information

  4. All of the styles involved in the selected elements, we can do some debugging here to see the effect, and then copy into the code, and of course design to some browser fit. The Computed module next to Styles is all Computed Styles (some Styles are duplicated, overridden, and the overridden style is shown here) and the box model!

    Click on thedisplay: flexOr next to the new icondisplay: inline-flexTo open theFlexboxEditor. The Elastic box editor provides a way to quickly edit the elastic box properties. See the figure below

  5. Layout module is the layout module, display all grid, Flexbox elements in the page, you can switch the overlay layer of each element. The following figure

  6. The events of the selected element, due to the development of engineering, the packaged code is processed and cannot be directly located.

  7. Take hover for example. Simulate the hover event for the selected element, as shown in the figure below. After clicking the hover, the mouse is equivalent to putting this element into the element, and the corresponding style will also appear. You can use this to modify the hover style. Of course, there are other pseudo-class operations.

  1. The console panel

The interface of the console panel, but very familiar, usually used to develop very much, debugging some JS code, often need to output variables in the console, find variables. And you can see that in the red box above you can filter or print something. The console object is not a Built-in object for javascript, but a built-in object for the browser, so the output style in the console is browser-specific.

  1. console.log

    In most cases, it’s an output variable. This is much easier to use than alert, because alert defaults to toString(), and you can expand the printed information. Note that the object/array is evaluated the first time it is extended. In the following bar object, the name has been modified for the second time. Expand the first time to print bar and find that it is modified.

        let foo = 'test'
    let bar = {
      name: 'test'.age: 12
    }
    console.log(1)
    console.log(foo)
    console.log(bar)
    bar.name = 'test2'
    console.log(bar)
    console.log('%ccolorConsole'.'font-size:24px; color:red')
    console.log(document.querySelector('.test'))
Copy the code

  2. console.info

    The function of console.info and console.log is almost exactly the same: they print information from the console, although they may be printed in a slightly different style from console.log.

  3. console.error

    Console. error also has almost the same effect as console.log, except that the printed content is highlighted in red and preceded by an x. As shown in the following, when you are developing a debugging process, you can print a lot of content through console.log, but you want to find the information quickly, console.error can be easy to find.

  4. console.warn

    Highlight the printed message with a yellow exclamation mark.

  5. The console. The time and the console. TimeEnd

    The console.time and console.timeEnd methods are used together. They take the same argument and output the execution time of the code between the two expressions.

        console.time('Timer')
    for (var i = 0; i < 1000; i++) {
      console.log(i)
    }
    console.timeEnd('Timer')
Copy the code

  6. console.table

    Console. table prints out complex data types (objects, arrays, etc.) as tables in the console, and you can use arrays of objects nested or combined to parse them into tables.

       let object1 = {
      a: 1.b: 2.c: 3.d: 4
    }
    console.table(object1)

    let arr1 = new Array(10).fill('test')
    console.table(arr1)

    let data1 = [{ num: 1 }, { num: 2 }, { num: 3 }]
    console.table(data1)
Copy the code

    There are, of course, a number of other console methods that you can move on toThis article

  7. Sources panel

    Personally, I think this part is super important and can be used as an aid to analyze projects and problems that arise.

    1. The debugger to debug

      Enter debugger in your code, open the console, and jump to this section to start breakpoint debugging

    2. Breakpoint debugging

      Find the corresponding file in sources to debug the breakpoint, of course now webPack packaging needs to opensourcemapIn short, Sourcemap is a technique that helps us debug the original developed code in case of inconsistency between the developed code and the actual running code. Especially today, most of the front-end development code is compiled, packaged, and other engineering transformations.

    3. View values in debugging
      1. View the value of the variable in the currently executing function in the scope on the right

      1. Move the mouse pointer to the current running part to view the corresponding value. When a statement is executed, the value of the variable is displayed on the right

    4. skills

      1. You can basically locate a piece of code, and then put a breakpoint on its periodic function. When the breakpoint is executed, the whole rendering and processing is stalled. We can see the effect

      2. Back to the theme, just got a project, after running, because of a variety of componentification reasons, can not find the corresponding code at once, you can locate according to some marks in the page, such as the page has the module “switch”, you can search the word in the project, or search the element class, to locate.

      3. Not only can you look at some of the logic in the code, but you can also look at some of the frameworks and see what they’re doing, for example, with computed in VUE, and you break this part, and you see that this part is going to be executed several times, and the value that it evaluates might be changed later on, right? And then it gets triggered again.

      4. Some global methods, or overrides global methods, we can try as follows

Debugging about Vue

Vue.js devtools

Data, props, computed, and other Components can be clearly seen. Because Components are nested deeply or loaded dynamically, we can observe the Components through this. This part of data is synchronized, and there is no need to print the data in the data every time.

Hope to help some small partners! There are other module updates as needed.