头图

11+ chrome advanced debugging skills, learning efficiency directly increased by 666%

Maybe you and I have never met, but it is very likely that we will meet each other late, I am a front-end fat head fish

foreword

Chrome browser as the front-end children's shoes 老婆 , I believe you must be familiar with it. 调页面 , 写BUG , 画样式 , 看php片

Do not believe? Let's see how powerful our 老婆 is. …

1#. One-click to re-initiate the request

When debugging with the back-end interface or troubleshooting online bugs, have you often heard them say this: you try to make another request, let me see why it went wrong!

There is a ridiculously simple way to resend the request.

  1. Selected Network
  2. Click Fetch/XHR
  3. Select the request to resend
  4. Right click and select Replay 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

It is still a scenario of joint debugging or BUG repair. For the same request, sometimes it is necessary to modify the input parameters and re-initiate. Is there any shortcut?

  1. Select Network
  2. Click Fetch/XHR
  3. Select Copy as fetch
  4. console paste code
  5. Modify the parameters, press Enter to get it

I used to change the code or write by hand fetch . It's so stupid to think about it...

3#. Copy JavaScript variables

What if your code is calculated to output a complex object that needs to be copied and sent to someone else?

  1. Use the copy function and execute 对象 as the input parameter

In the past, I always printed to the console through JSON.stringify(fetfishObj, null, 2) , and then copied and pasted manually, which was too inefficient...

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

By debugging web Elements rear panel of the selected element, if you want JS know some of its properties, such as , , 位置 What about 位置 and so on?

  1. Select the element to debug via Elements
  2. The console can be accessed directly with $0

5#. Capture a full-screen webpage

Occasionally we also have the need to take screenshots of web pages. One screen is fine, and the system's own screenshots or WeChat screenshots can be done, but what if we want to take screenshots that exceed one screen ?

  1. Be ready to take screenshots
  2. cmd + shift + p Execute the Command command
  3. Type Capture full size screenshot press enter

What if you want to intercept some of the selected elements?

The answer is also very simple, the third step is to enter Capture node screenshot

6#. Expand all DOM elements with one click

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

  1. Press and hold the opt key + click (the outermost element that needs to be expanded)

7#. The console refers to the result of the last execution

Let's take a look at this scene. I guess you must have encountered it. Various processes have been performed on a certain string, and then we want to know the result of each step. What should we do? .

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

you might do

 // 第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

easier way

Use $_ to refer to the result of the previous operation, without copying it every time

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

8.# Quickly switch themes

Some students like the white theme of chrome, and some like black. We can use the shortcut keys to quickly switch between the two themes.

  1. cmd + shift + p Execute Command command
  2. Enter Switch to dark theme or Switch to light theme to switch the theme

9.# " $ " and " $$ " selector

Using in the console document.querySelector and document.querySelectorAll selecting the element of the current page is the most common requirement, but it is a bit too long, we can use $ $$ replace.

10.# $i Install the npm package directly on the console

Have you come across this scene? Sometimes I want to use a certain one such as dayjs or lodash API , but I don't want to check it on the official website.

Console Importer is such a plug-in, which is used to directly install the npm package on the console.

  1. Install Console Importer plugin
  2. $i('name') install npm package

11. # Add conditional breakpoint The magic of conditional breakpoint

Suppose there is the following code, we want the breakpoint to be triggered when the food name is 🍫 , how can we do it?

 const foods = [
  {
    name: '🍔',
    price: 10
  },
  {
    name: '🍫',
    price: 15
  },
  {
    name: '🍵',
    price: 20
  },
]

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

This is very convenient when there is a large amount of data, and you only want to break the point condition when the condition is met. Imagine if there is no conditional breakpoint, do we need to point the debugger n times?

At last

I hope to share practical, basic and advanced knowledge points with you all the time, get off work early and fish happily together.

I look forward to your following me in the Nuggets : Front-end Fat Head Fish , you can also find me in the public account: Front-end Fat Head Fish .


3.7k 声望
6.1k 粉丝
0 条评论
推荐阅读
面试官:Vue3响应式系统都不会写,还敢说精通?
也许你我素未谋面,但很可能相见恨晚,我是前端胖头鱼前言都说今年是最惨工作年,大厂裁员,小厂跟风,简历投了几百封回信的寥寥无几,金三银四怕是成了铜三铁四,冷冷清清,凄凄惨惨。但是今天的主角,小帅同学...

前端胖头鱼6阅读 5.6k评论 2

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城32阅读 7.3k评论 5

封面图
vue UI框架比较
最好基于vue2.0PC端:因为用过的是饿了么UI,所以比较以饿了么UI为基础element UI 饿了么UI支持vue2.x80分优点:组件的API方法、属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观N3 N3支持vue2.x70分优点:...

chinawzc22阅读 39.9k评论 17

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.3k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
3.7k 声望
6.1k 粉丝
宣传栏