11 chrome debugging tips that can improve efficiency

This article will share with you 11 advanced chrome debugging skills. Learn to directly increase the efficiency by 666%. I hope it will be helpful to my friends!

Chrome browser is the wife of front-end children’s shoes, I believe you must be familiar with it. Adjust the page, Write BUG,Painting style,Watch php movieWithout it, the whole world will not be good.

Do not believe? Let’s take a look at how powerful our wife is....

#1#. Re-initiate the request with one click

with the backend When jointly debugging interfaces or troubleshooting online bugs, do you often hear them say this: Try making another request and let me see why something went wrong!

Resend the request, there is a ridiculously simple way.

• SelectNetwork

• ClickFetch/XHR

• Select the request to resend

• Right click and selectReplay XHR

##No need to refresh the page, no need to interact with the page, isn't it very cool! ! !

2#. Quickly initiate a request in the console

This is still a scenario of joint debugging or bug fixing. For the same request, sometimes it is necessary to

modify the input parameters Restart, is there any shortcut?

• Select

  Network

• Click

  Fetch/XHR

• Select

  Copy as fetch

• Paste the code in the console

• Modify the parameters and press Enter to finish

I used to always change the code or write

fetch by hand. It’s really stupid to think about it...

3#. Copy JavaScript variables

If your code will output a

complex object after calculation, and needs to be copied and sent to others ,what to do?

• Use the

  copy function and execute the object as an input parameter

In the past, I always used

JSON.stringify(fetfishObj, null, 2) to print to the console, and then manually copy and paste. This efficiency is really low...

4#. The console obtains the element selected in the Elements panel

When debugging the web page, after selecting the element through the

Elements panel, if you want to use JS What should I do if I know some of its attributes, such as width, height, position, etc.?

• Select the element to be debugged through

  Elements

• Access the console directly with

  $0

5#. Capture a full-screen web page

Occasionally we will also take screenshots of web pages As for the requirement, one screen is okay, the system's built-in screenshots or WeChat screenshots can be done, but what if

is required to capture the content that exceeds one screen?

• Prepare the content that needs to be screenshot

• cmd shift p Execute CommandCommand

• Enter

  Capture full size screenshot Press Enter

if Want to intercept some selected elements?

The answer is also very simple. In the third step, enter

Capture node screenshot to get

6#. Expand all DOM elements with one click

When debugging elements, do you often expand them one by one to debug them when the level is relatively deep? There is a faster way

• Hold down the

  opt key and click (the outermost element that needs to be expanded)

7#. The console references the result of the last execution

Let’s take a look at this scenario. I guess you must have encountered it. The string has undergone various processes, and then we want to know the results of each step. What should we do? .

'fatfish'.split('').reverse().join('') // hsiftaf

You might do this

// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf

更简单的方式

使用$_引用上一次操作的结果，不用每次都复制一遍

// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
$_.join('') // hsiftaf

8.# 快速切换主题

有的同学喜欢chrome的白色主题，有的喜欢黑色，我们可以使用快捷键迅速切换两个主题。

• cmd + shift + p 执行Command命令

• 输入Switch to dark theme或者Switch to light theme进行主题切换

9.# "$"和"$$"选择器

在控制台使用document.querySelector和document.querySelectorAll选择当前页面的元素是最常见的需求了，不过着实有点太长了，咱们可以使用$和$$替代。

10.# $i直接在控制台安装npm包

你遇到过这个场景吗？有时候想使用比如dayjs或者lodash的某个API，但是又不想去官网查，如果可以在控制台直接试出来就好了。

Console Importer 就是这么一个插件，用来在控制台直接安装npm包。

• 安装Console Importer插件

• $i('name')安装npm包

11.# Add conditional breakpoint条件断点的妙用

假设有下面这段代码，咱们希望食物名字是?时才触发断点，可以怎么弄？

const foods = [
  {
    name: '?',
    price: 10
  },
  {
    name: '?',
    price: 15
  },
  {
    name: '?',
    price: 20
  },
]

foods.forEach((v) => {
  console.log(v.name, v.price)
})

这在大量数据下，只想对符合条件时打断点条件将会非常方便。试想如果没有条件断点咱们是不是要点n次debugger？

（学习视频分享：web前端开发、编程基础视频）

The above is the detailed content of 11 chrome debugging tips that can improve efficiency. For more information, please follow other related articles on the PHP Chinese website!