Lego rendering is directed at the C-end users. The C-end devices are uneven and the environment is complex, so many bugs have been assigned to the R&D students. In order to quickly solve the > BUG, so need flexible use of debugging tools, then sort out about the > Chrome browser debugging methods, need to take. On a Mac, use F12 or right-click “Inspect Element” to open the browser’s debugging tool.

0x01 Dynamically changes the element style class name

Adding or deleting class names is common in conditional logic, and devTools allows you to dynamically change/activate/disable class names directly

  1. Select the element in the DOM tree
  2. Click on the activate.cls
  3. You can dynamically change whether to use the class name
  4. throughAdd new classThe input box dynamically adds the defined class name

In addition to changing the class name for an element, CSS rules can be added dynamically

0x02 Pseudo class is Forcibly Activated

Some of the actions in web pages are based on :active, :hover, etc., when the mouse moves to the console, these pseudo-classes do not take effect, in the console is also unable to debug CSS style, you can use the forced activation pseudo-classes

  1. Select the element that has the pseudo-class effect
  2. Click on the:hov
  3. According to the code situation, check the corresponding pseudo-class
  4. The Styles panel allows you to dynamically debug pseudo-class styles

** Operation method 2: ** can also be in the DOM tree right-click menu ->Force State-> Select the corresponding pseudo-class

0x03 Compute style to CSS rule

If the DOM level of a project is complex (deep), for example, the style attribute of font size, there may be multiple layers of coverage. We must locate the final rendering of the effective CSS to make effective changes.

  1. inComputedIn the panelfilterThe input box filters the style property name
  2. When you expand the property, you see multiple definitions, and only the first line takes effect
  3. When the mouse hover, the left side is displayed->, click to jump toStylesCSS rules in the panel
  4. You can change the style in the valid CSS rules

In the calculation style, you can see the real size displayed in the browser. When locating the problem of text newline in the IOS client, it was found that the Android system set the font size to “minimal”, resulting in the inconsistency between the display on the student side and the teacher side.

0x04 Color selector

In debugging CSS, set the value of the color related attributes, colors have HEX, RGBA, RGB, HSLA form, as a professional front-end development project lion, a total of 255^3 = 16581375 colors, but the old husband is not to remember. But colors can be dynamically changed through Chrome’s color picker

  1. Find the CSS property that sets the color
  2. Click on the selector to the left of the color value (color box)

0x05 Shadow selector

The shadow selector is used for the box-shadow property and can be visually adjusted directly through the selector

  1. Click on thebox-shadowProperty to the right of the Cascading Offset icon, the shadow selector pops up
  2. Set vertical and horizontal offset, shadow blur and diffusion, inner and outer shadows through the color selector panel

0x06 The CSS attribute value is quickly adjusted

Mouse wheel allows you to fine-tune or quickly adjust CSS property values, such as font size, rotation Angle, width and height values, etc. Mouse wheel is not just +-1

  • +-0.1:Option+ mouse wheel for WindowsAlt+ roller
  • +-1: Rolls the wheel back and forth
  • 10 + –:Shift+ mouse wheel
  • + – 100.:Command+ mouse wheel for WindowsCtrl+ roller

0x07 animation Debugging an animation

Some elements can be animated through “frame animation,” transition, and the code is so abstract that you actually have to view the effects in the browser. Chrome development tools provides a debug panel for animation. This panel can provide animation replay, pause, preview, modify operation methods:

  1. Open the Console and press ESC to bring up the Console panel
  2. Click “vertical three” in the upper left corner of the Console panel and select “Animations” from the pop-up menu to open the animation debugging panel

In the animation panel, you can see the name of the frame animation and the corresponding DOM node. Click the DOM node in the first column to quickly locate the POSITION of the DOM in the Elements panel. At the same time, the Styles panel will be updated.

  • Locate the DOM structure of the animation
  • Control animation execution process: play, pause, replay, decelerate animation, control the execution time
  • Preview animation execution process, animation time curve
  • Listen to record all animation processes

0x08 Copy console variables to clipboard

The Console panel outputs a lot of logs, and when we want to copy a complex printed object and find that direct copy would cause data loss, we only need onecopy()Function to copy variables to the clipboard

0x09 Visual editing of web pages

F12 engineer can quickly forge web pages out of the Console (Console) execution:

  • document.body.contentEditable="true"
  • ordocument.designMode = "on"

0x0A Simulate a weak network environment

inNetwork TabNext, can be inOnlineSelect simulate weak network environment from the drop-down list boxYou can also add a custom network environment to set the upload speed, download speed and network delay

0 x0b XHR replay

XML HTTP RequestWill be inNetwork TabDown the record, select the correspondingXHRRecord, right click to replay network requests. In addition, if you also want to modify the request parameters when you replay the request, you can copy the request package to the command line and modify it for execution

curl 'https://www.baidu.com/s?ie=utf-8&csq=1&pstg=21&mod=2&isbd=1&cqid=8e79bf0d0004f40d&istc=8905&ver=0QxsJN2ZOr4aje7f6_0UmO9 Z20VzWyiNCYC&chk=5fc9f524&isid=F000276D55E53989&ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%AD%97%E8%8A%82%E8%B7%B3% E5%8A%A8&fenlei=256&rsv_pq=aa5b9db10000e460&rsv_t=5c57hKI5zVEqdfLfosNaYFxE%2B4vOfqPH059N%2FYFLF1bEBAux2Mo0HRD%2FeQA&rqla Ng = cn&rsv _enter = 1 & rsv_dl = ib&rsv _sug3 = 14 & rsv_sug1 = 12 & rsv_sug7 = 100 & _ck = 115040.0-1-1-1-1-1 & 33213 _1459_33061_3 rsv_isid = 3113_33098_33101_33183_33181_33145_33211_33199_33217_22159_33216_33215_33185&isctg=5&rsv_stat=-2&rsv_sug7=100' \
  -H 'Connection: keep-alive' \
  -H 'Pragma: no-cache' \
  -H 'Cache-Control: no-cache' \
  -H 'Accept: */*' \
  -H 'is_xhr: 1' \
  -H 'X-Requested-With: XMLHttpRequest' \
  -H 'is_referer: https://www.baidu.com/' \
  -H 'the user-agent: Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36 \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8&fenlei=256&rsv_ pq=aa5b9db10000e460&rsv_t=5c57hKI5zVEqdfLfosNaYFxE%2B4vOfqPH059N%2FYFLF1bEBAux2Mo0HRD%2FeQA&rqlang=cn&rsv_enter=1&rsv_dl =ib&rsv_sug3=14&rsv_sug1=12&rsv_sug7=100' \
  -H 'Accept-Language: zh-CN,zh; Q = 0.9 ' \
  -H 'Cookie: BIDUPSID=7FFA50202A583B0E5768F9404E44F84B; PSTM=1594532284; BD_UPN=123253; BAIDUID=F00027F4581A89A057BFF664D0C6D55E:FG=1; sugstore=0; H_WISE_SIDS=163166_163200_161505_150967_160246_160663_156287_161253_159548_159610_162915_155225_161299_163302_162372_159 382 _163162_160443_161421_157264_163396_161420_127969_161771_159066_161961_160898_161729_161922_131423_163164_128701_1621 17 _158055_162168_161965_159954_160422_144966_162186_154213_161241_139884_158640_155529_160980_163114_147552_161880_16189 1 _162268_162334_162851_162816_162642_159092_162264_162261_162155_110085_162026_163168_163317_163318_163319_163321; delPer=0; PSINO=2; BD_HOME=1; BD_CK_SAM=1; COOKIE_SESSION=769033_0_9_0_63_84_1_6_3_8_1_16_0_0_0_0_1605507855_0_1607056101%7C9%230_0_1607056101%7C1; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=33213_1459_33061_33113_33098_33101_33183_33181_33145_33211_33199_33217_33149_22159_33216_33215_33185; H_PS_645EC=9555H%2BItaTBsNu7fj7yuWi%2BorvZXCBbqUWWWLmv7EAQQAseiCtR626mbuWU; BA_HECTOR=002105ah8g2l2h01c11fsjt950r' \
  --compressed
Copy the code

For XHR requests, the data packets returned in normal business scenarios are JSON data, so you can also right-click on the pop-up menu and select Copy Response (often seen on the render side when students get mock data).

0x0C Different Console

12.1 the console. The log () | info () | debug () | warn () | error ()

The original string content is printed in the browser console, and the text color varies depending on the “level.”

12.2 a placeholder

Javascript provides a number of placeholders that can be used to debug output, such as:

  • %o– Object placeholder
  • %s– String placeholder
  • %d– Number placeholder

12.3 Console also supports the CSS

use%cPlaceholders that can be used to customize the style of the output just like inline styles

12.4 Displaying JSON Data in Tables

console.table()More intuitive/beautiful displayJSONFormat data

12.5 the log combination

  • console.group()
  • console.groupEnd()

Organize the printed information together as much as possible so that our output looks more structured and organized *For more information, please refer to:Can you really use console.log?

0 x0d screenshots

Web screenshots, we usually use third party tools, but Chrome already provides screenshots. The usage method is as follows:Command explanation:

  • Capture area screenshot
    • Custom Select the screenshot area, similar to the common screenshot tool
  • Capture full size screenshot
    • Capture the full HTML rendering
  • Capture node screenshot
    • Capture the rendering image of a DOM nodeElements TabUnder the selectedDOMnode
  • Capture screenshot
    • Intercept the screen seen in the browser window

0x0E Performance

Performance monitoring, when debugging a Web page, want to see the process from HTML rendering to screen or run time user interaction render, redraw, reshoot, memory usage, page changes process. So you can do it inPerformace TabNext, click the red dot to record the entire page change process.

  • screenshots
  • Memory usage. If you want to learn more about the Memory status, you can record and view the Memory Tab. The “Trash” button on the right of the Memory Tab is active garbage collection

  • Js call stack, can be located to the corresponding JS file can be previewed in the source

Through this panel, you can see the performance relationship between the screen and script code execution more directly, and it is convenient to locate the display problems in rendering.

0x0F Source Tab

In the debugging toolSource TabIs a very useful panel that can be used to quickly navigate from presentation to code problems. In the course of development debugging, we often haveconsoleA lot oflog, but in positioningBUGCause, if the code call hierarchy is deep, then only throughconsoleTo solve the problem is less efficient.SourcePanel allows you to preview all static resources called by the current page, as well as the source code. The general functions of the whole panel are as follows:

16.1 DEBUG Toolbar

Each icon corresponds to:

  • Pause (continue)
  • Single step over
  • Enter the function
  • Jump out of the function
  • Single step
  • Activate (close) all breakpoints
  • Automatic breakpoint on code execution exception
    • Select Pause On Caught Exceptions.

16.2 Debugger on the right

16.2.1 Watch

Variable monitoring: monitor the variables that are added to the listening list. There are buttons of “Add” and “refresh” variable list on the right of the panel

16.2.2 Call Stack

Function call stack, the call stack on which the breakpoint is executed to the current function, which makes it very easy to retrieve where in the project the function was actively “progressive”. Very useful! The actual case, in solving the editor to do the paging exception by calling the stack and source code panel in real time display variables, timely to locate the cause of the problem.

16.2.3 Scope

Scope, the values of all properties of the function where the current breakpoint is located. Scope displays three types of values: Local, Closure, and Global.

16.2.4 Breakpoints

Show a list of breakpoints. Show the file/line/brief content of each breakpoint. Select/deselect the box in the breakpoint list to activate/disable breakpoints

16.2.5 XHR Breakpoints

To debug XHR, enter keywords in the URL of XHR to intercept the XHR containing keywords in the URL

16.2.6 DOM Breakpoints

DOM breakpoints, inElementsTo set a conditional breakpoint, right-click a node in the DOM tree:

  • Subtree Modifications: Child node changes
  • **attribute modifications: ** Modifications to the current node attributes
  • Node remove: Indicates that the current node is removed

16.2.7 Global Breakpoints

Global listeners, where you can see which global event listeners are registered and which functions are bound to, can also be removed (RemoveGlobal event listener

16.2.8 Event Listener Breakpoints

Event listens for breakpoints, opens the list, enters the breakpoint when the event is fired, and the debugger stays on the line of fired event code. Expand the event list and select the events to be monitored

16.3 Left Navigation bar

16.3.1 Page

The wholeSource TabThe default “Page column” is selected. Here you can see the static resource file directory tree with the domain name as the list. Click on the file to preview the static file in the main view

16.3.2 Content Scripts

Chrome browser plug-in js script code in the content area, if the debugging tool is not satisfied, you can also develop a Chrome plug-in to improve the development and debugging efficiency (for example, hongyan developed the TWO-DIMENSIONAL code of RoomID generated under the rapid building course)

16.3.3 Snippets

Code snippets, developers write some debugging code snippets, such as parsing JSON data and other tool functions. Code in the snippet can access variables and functions on the current page without being lost to refreshes.

  • Right click”run“
  • You can right-click when you don’t need it.”remove“

The other tabs are less commonly used, so I won’t introduce them for the time being…

16.4 Main View area

An area for previewing static resources, similar to an editor, with open script/resource files toggled over at the top. Preview is the most basic function, and the main view/panel has other important functions. There are three types of breakpoints:

16.4.1 Common Breakpoints

Click the line number to add a breakpoint directly, similar to writing it manually in the code

debugger;
Copy the code

16.4.2 Conditional Breakpoint

At the same time, you can change the current breakpoint to a conditional breakpoint. You need to add a conditional code fragment to determine whether the current breakpoint needs to be brokenAs shown in the figure above, adding a conditional breakpoint is equivalent to modifying the source code. The background color of the main view area will change to light yellow, indicating “edited.”

16.4.3 black box script

For example, in the projectjquery.min.jsYou can add this type of script file to the “black box script” by right-clicking on itdebugWhen you step, you do not go into such library files, reducing the number of debugging steps.

0x10 Coverage

Code usage (efficiency) statistics, support for runtime recording statistics. So for example we introducedjqueryBut only one was usedhide()Method, so forjqueryCode usage is low.This statistic supports statistics on CSS and JS code usage

0x11 Rendering

Highlight areas that change during page redrawing and rearrangement. You can also view frame rate information for optimizing web page performance

  1. inmore toolsMenu is availableRenderingtool

0x12 Layers

Layers. When a page is complex enough, rendering performance issues may arise with CSS, so you can explicitly view DOM Layers using the Layers tool.

  1. inmore toolsMenu is availableLayerstool

More on browser rendering can be found in this article:Deep browser rendering

0x13 Mobile H5 Debugging

Chrome supports debugging of Android mobile devices, and Safari supports debugging of IOS mobile devices. Here’s how Chrome debugs An Android mobile device:

  1. Data line linkPCwithAndroidEquipment,AndroidDevice debugging enabled (enables debugging mode and allows the current device to debug mobile)
  2. ChromeBrowser address bar access:chrome://inspectTo enter the debugging page

  • Support devices and web pagesApp, the page,ChromeThe plugin,WorksAnd “other” types of debugging
  1. Click on theinspectCan be like a normal exam web page, debugging mobile terminalwebviewIn the operation of thewebThe program

Regarding the DEBUGGING of H5 in APP, please refer to the article:Debug H5 in APP

conclusion

Chrome browser provides rich development and debugging tools for WEB application developers. This article describes the use scenarios, methods and personal understanding of some of the tools. Tools are only auxiliary to development, and in order to efficiently develop and solve bugs, we need to accumulate and summarize experience in the development practice.

reference

  • Debugging guide for real mobile devices
  • Chrome Developer Tools
  • Network panel for Chrome DevTools

❤️ Thanks for your support

  1. If you like it, don’t forget to share, like and collect it.