你不知道的chrome调试技巧,chrome 开发者工具调试技巧工欲善其事
本文将分享chrome的11个高级调试技巧，直接提升效率666%。希望对朋友们有帮助！
作为前端童鞋的老婆，chrome浏览器你一定不陌生。调页面，写bug，画风格，看php电影。没有它，整个世界都不香。
不相信我？让我们看看我们的妻子有多棒。
1#. 一键重新发起请求
用后端接口调试或排查在线bug时经常听到他们这么说吗：你再发起一次请求试试，我这边看下为啥出错了！
再要求，有个简单又离谱的办法。
选择网络。
单击获取/XHR。
选择要重新发送的请求。
右键单击重放XHR
不刷新页面，不走页面交互，是不是很棒！
2#. 在控制台快速发起请求
还是联调或者bug修复的场景。对于同一个请求，有时需要在修改入参重新启动。有什么捷径？
选择网络。
单击获取/XHR。
选择复制为提取。
控制台粘贴代码
修改参数，按回车键完成。
以前都是手动改代码或者写fetch。想想就傻。
3#. 复制JavaScript变量
如果你的代码计算后会输出一个复杂的对象，需要复制发给别人怎么办？
使用copy函数将对象作为参数执行。
我以前是通过json.stringify (fetfishobj，null，2)打印到控制台，然后手动复制粘贴，效率太低。
4#. 控制台获取Elements面板选中的元素
调试网页时通过Elements面板选择元素后，想知道它的一些属性，如宽度、高度、位置等，该怎么办？通过JS？
通过元素选择要调试的元素。
使用$0可以直接访问控制台
5#. 截取一张全屏的网页
偶尔我们会有网页截屏的需求。一屏没问题，系统自带截屏或者微信截屏都可以，但是需要将超出一屏的内容也截下来咋办呢？
准备需要截屏的内容。
Cmdp执行Command命令。
输入捕获全尺寸截图，然后按回车键。
如果要截取选中的部分元素呢？
答案也很简单。第三步，进入抓取节点截图。
6#. 一键展开所有DOM元素
调试元素时，当层次较深时，是否经常逐个展开进行调试？有一个更快的方法。
按住opt键单击(需要展开的最外面的元素)
:
7#. 控制台引用上一次执行的结果
.让我们来看看这一幕。我猜你也一定遇到过。我们对某个字符串执行了各种过程，然后我们想知道每一步的结果。我们做什么呢。
肥鱼。拆分(“”)。反转()。join()//hsiftaf你可能会这样做
//第一步
肥鱼。split() //[f ， a ， t ， f ， I ， s ， h]
//第二步
[f ， a ， t ， f ， I ， s ， h]。reverse() //[h ， s ， I ， f ， t ， a ， f]
//第三步
[h ， s ， I ， f ， t ， a ， f]。join()//hsiftaf
更简单的方式
用$ _引用上一次操作的结果，而不是每次都复制。
//第一步
肥鱼。split() //[f ， a ， t ， f ， I ， s ， h]
//第二步
$_.reverse() //[h ， s ， I ， f ， t ， a ， f]
//第三步
$_.join()//hsiftaf
8.# 快速切换主题
有些同学喜欢chrome的白色主题，有些同学喜欢黑色。我们可以使用快捷键在两个主题之间快速切换。
Cmdp执行Command命令。
输入切换到暗主题或切换到亮主题来切换主题。
9.# "$"和"$$"选择器
使用document.querySelector和document.querySelectorAll在控制台中选择当前页面的元素是最常见的需求，但是有点太长了。我们可以用$和$ $来代替。
10.# $i直接在控制台安装npm包
你遇到过这种场景吗？有时候想用dayjs或者lodash之类的API，但是又不想在官网查。要是我能直接在控制台上尝试就好了。
控制台导入器就是这样一个插件，用于在控制台中直接安装npm软件包。
安装控制台导入程序插件
$i(name )安装npm软件包
11.# Add conditional breakpoint条件断点的妙用
假设有以下代码。我们希望食物的名字是什么？当断点被触发时，我能做什么？
const foods=[
{
名称：？,
价格：10英镑
},
{
名称：？,
价格：15英镑
},
{
名称：？,
价格：20英镑
},
]
foods.forEach((v)={
console.log(虚拟名称，虚拟价格)
})数据量大，满足条件就中断，非常方便。试想一下，如果没有条件断点，我们要不要点n次调试器？
(学习视频分享：web前端开发与编程基础视频)以上是11个可以提高效率的chrome调试技巧细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。