Chrome 调试技巧

Console

$0 会返回当前被选中的元素

比如我当前选中了【全部用例】这个元素,在控制台输入 $0 就会返回这个元素的 dom

如果想查看这个元素的一些 node 属性,比如: clientLeftoffsetTopscrollTop 等,输入 console.dir($0) ,就会将这个元素转化为一个 node,不需要我们在代码里获取这个元素后打印了。

$0~$4 代表了最近5个你选择过的DOM节点,最多保存5个

$_ 是指向上一个表达式的结果的引用

当你在控制台中执行一个表达式或命令后,$_ 会保存该表达式的结果,以便在后续操作中引用,当我们想在控制台将表达式的执行结果保存为变量时,不需要再写 var a = xxx

$$ == querySelectorAll

当需要选中元素的时候,方便了很多

Command+Shift+C (mac)

这个快捷键可以快速地打开【元素】面板,并激活【小箭头】


Sources

条件断点

一般我们打断点直接点击目标代码所在到行即可,通过 command + 点击 可唤出断点的类型配置;也可在已有断点上右键修改断点。其中条件断点非常有用,当输入的表达式为 true 时,断点生效;当有深度循环时,这简直是救星。

查看断点处到变量

当代码运行到断点处时,右侧是断点处此时的信息面板,在【监视】区添加变量,可以方便的看到代码运行到此处该变量的值,无需将鼠标悬浮到变量查看了

XHR断点

在右侧面板中可以看到下图的 XHR提取断点,点击右侧的 '+',可以添加一些api匹配字符串,如下图我添加了 '/statistics',表示当api请求url包含该字符串时,断点到触发的地方

这在排查一些api请求时非常有用,如下图,发现在某个页面触发了2次一样的api

这时候按照上述方式打断点,可能会进入到第三方库的文件中,如果这个文件不是期望断点的文件,可右键左侧文件目录,点击【将目录添加到忽略列表】,后点击让断点继续执行;断点就会忽略该文件/文件夹

依此类推可以忽略多个,直到断在你的本地文件内

管理断点

右侧断点的面板用于管理页面中所有的断点,在任一文件上右键,可移除所有断点。当在好多文件中都设置了断点时,在这里可以批量清除;

当然也可以点击禁用断点按钮来跳过所有断点,但断点并未被清除


css layout

快速设置 / 查看flex系列属性

当我们给一个元素设置了diaplay: flex 后,在样式面板flex属性后会有一个icon,点击会展示一个flex属性相关面板,展示这个元素设置了哪些属性;点击每个 icon 可快速设置对应属性

在【元素】面板下,对于flex布局的元素,会有一个flex的tag标志,点击tag,会给这个元素加上醒目的边框或背景色。

相关推荐
前端啊龙4 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠8 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds28 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试