跳到主要内容

chrome调试

控制台调试​

  • 利用chrome控制台调试，提高调试的效率

设置文档可编辑​

bash
// 设置文档可编辑
document.designMode = 'on'

利用$技巧​

bash
// 打印上一次运行结果
$_

// 获取当前选中节点 【$1-$4获取最近选中的4个节点】
$0

复制JSON数据​

js

// 在控制台复制JSON数据，通过ctrl+v粘贴数据
copy({name:'qqqiu',age:20})

Console Importer插件​

  • 通过Console Importer插件，可以在chrome浏览器安装库
bash
// 在控制台安装包 【安装Console Importer插件】
$i('lodash')

devtools调试​

修改Fetch/XHR 请求​

  • 可使用 Chrome DevTools 可以直接改写 Fetch/XHR 请求的内容

  • 对于mock数据非常方便

修改请求数据步骤：

  • 从network中选择一条请求
  • 鼠标右击选择 Override content
  • 选择文件夹，就会定位到该文件夹中去修改请求

过滤掉不想看的请求​

  • 通过devtools里可以过滤掉不想看的请求

过滤请求步骤：

  • 在network中filter搜索栏
    • 使用横杠加字符串，多个过滤条件用空格分隔
  • 如希望过滤js、css请求
bash
-js -css

可以理解为 横杠的意思是 减号的意思

  • -js : 表示减去js请求 （过滤js请求）

chrome截屏技巧​

  • 使用快捷键Ctrl + Shift + P，输入full，回车，截取当前整个网页