chrome 调试技巧

向右看齐 2022-04-27 21:26 351阅读 0赞

# chrome 调试技巧 #

*  ctrl + shift + i 快速打开window的devtool
 *  ctrl + shift + d 快速切换视窗左右位置
 *  (ctrl + \[) or (ctrl + \]) 实现切换面板
 *  ctrl + 1--9 也能实现跳转直接数的面板，需要在setting 里进行设置
 *  ctrl + shift + p 快速打开命名含一些隐藏的功能
 *  $$ === Array.from(document.querySelectorAll('div')) 快速选择dom

### 调试样式 --> 上下箭头递增递减 ###

*  Alt + 上下箭头 0.1
 *  上下箭头 1
 *  Shift + 上下箭头 10
 *  Crtl + 上下箭头 100

### copy(data) ###

利用devtool 提供的copy 实现快速复制。

## elements, logs, sources, network 面板下的查找 ##

*  利用ctrl + f 来快速查找
 *  Aa 点击可以实现是否区分大小写 来匹配

## 快速截屏 ##

ctrl + shift + p 搜索 `screen` 下的`Capture full size screenshot`实现快速截屏。

## 快速切换黑、白主题 ##

ctrl + shift + p 搜索 theme 相关的选项，实现`明亮 & 暗黑`两种主题之间的切换

## Dom 元素上的$0 & $1 ##

*  $0 是对我们当前选中的html 节点的引用
 *  $1 是对上一次我们选择的节点的引用
 *  $2---$4. 更之前的了。

## console 默认就被 async 包裹, 所以对异步来说可以直接在console 中使用await ##

## 利用断点来加日志 `Edit breakPoint` 然后添加 .log .time .table ##

## 查看日志的dom 属性 ##

console.log(li) 会直接渲染成element 元素，使用

*  console.dir(li) 就可以查看他的属性等
 *  console.time() -- 开启一个计时器
 *  console.timeEnd() -- 结束时间，并将结果打出
 *  console.log('%c牛逼','font-size: 20px; color: red;') 自定义样式
 *  "眼睛" 符号, 定义任何JavaScript表达式

## network 下重新发送 XHR 的请求 ##

选中接口，选择 `Replay XHR` 即可 重新请求

ccs3 box-shadow Shadow editor 阴影编辑器 sensors(传感器)

引自小册

发表评论取消回复

表情：

评论列表（有 0 条评论，351人围观）

还没有评论，来说两句吧...

相关阅读

相关 Chrome调试技巧的骚操作二

Chrome的骚操作二代码块Snippets的使用 console中的'$' $0~$4 $

ゞ浴缸里的玫瑰/ 2023年02月18日 03:02/ 0 赞/ 40 阅读

相关【调试】939- 5个Chrome调试混合应用的技巧

![eed4fa439e41000df1ab7bca947db70b.png][] 对前端开发人员来说，Chrome 真是一个必备的开发工具，大到页面展示，小到 BUG 调试

旧城等待，/ 2023年01月17日 04:43/ 0 赞/ 253 阅读

相关 chrome的一些调试小技巧

一、一些常用的快捷键 1. Ctrl + Shift + D：切换DevTools窗口的布局（下右） 2. 切换DevTools选项卡 Ctrl + \[ 或

迈不过友情╰/ 2022年12月14日 06:07/ 0 赞/ 174 阅读

相关【Chrome】914- 12 张动图学习 Chrome 调试技巧

![1801f1297b3f05f2dc73e6f1815e72e4.png][] > 来自：掘金 > > 作者：老姚 > > 链接：https://juejin.cn/

傷城~/ 2022年11月15日 05:53/ 0 赞/ 200 阅读

相关【Chrome】871- 9 个常用 Chrome 调试技巧

![format_png][] 作者：Jimmy，链接：https://juejin.im/post/6881439870380834830 如果你是一个前端开发者，你接触

落日映苍穹つ/ 2022年10月30日 02:25/ 0 赞/ 227 阅读

相关 Chrome调试技巧

1.快速搜索文件当DevTools打开的时候，你可以按下`Ctrl + P`( 在Mac上使用`Cmd + P`)来快速的寻找和打开你工程中的任意文件。 [![Chr

心已赠人/ 2022年05月28日 01:09/ 0 赞/ 361 阅读

相关 Chrome 调试技巧

平时工作中常用的就是谷歌浏览器了，就因为其控制台比较清晰，整洁，方便实用，以下是平时工作中常用到的谷歌浏览器控制台调试技巧。 alert 这个不用多说了，不言自明。 co

冷不防/ 2022年05月08日 05:34/ 0 赞/ 385 阅读

相关 chrome 调试技巧

chrome 调试技巧 ctrl + shift + i 快速打开window的devtool ctrl + shift + d 快速切换视窗左右位置

向右看齐/ 2022年04月27日 21:26/ 0 赞/ 352 阅读

相关 JavaScript 在Chrome浏览器调试技巧

这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发

痛定思痛。/ 2021年10月14日 20:59/ 0 赞/ 531 阅读

相关 JavaScript10个chrome浏览器高级调试技巧

本文介绍一些用老式console来debug的技巧。我们都知道下面基本的技巧： console.log('Hello World!'); console.

不念不忘少年蓝@/ 2021年10月14日 20:47/ 0 赞/ 426 阅读