Chrome调试

创建2022-02-12更新2022-02-13阅读时间3m

课程来源 - bili
链接

快捷键

F12 打开命令台

win - ctrl + shift + p - 输入指令
例如：
SCREENSHOT - 截图 - 可以局部 / 全部页面
// 还有那些？

常用Tab

  • Element - css调试
  • Console
  • Source
  • Network
  • Application

Element

查询Dom树

  • 文本查询 - ctrl + F - 输入类名
  • css选择器查询
  • Xpath - //div//p - 不指定位置，在div下面找p标签

旁边的样式，可以直接复制！

Styles - 修改样式 / 复制
computed - 可以定位样式

  • Show all - 可以看到所有继承的样式
  • Group - 样式 有功能上的区分

Layout - 可以看到使用了Grid和Flexbox的布局！可以调整

  • Grid
  • Flexbox

Event Listeners - 可以看到使用的事件！

  • load
  • focus
  • click
  • blur
  • webxr
  • error
  • beforeunload
  • ….

DOM Breakpoints - 学Console再看看。。

Properties - 可以看到节点上的属性
原型链的形式显示。

Console

快捷键 - ctrl + shift + j

$_ 返回上一次输入的结果
$0 选中标签 - 可返回选中的标签！
$1 返回的上一个结果

console.log / time / group / 

1
2
3
4
5
console.time();
for (i = 0; i < 100000000; i++) {
  // 代码部分
}
console.timeEnd();

在代码中写入debugger，浏览器自动断点。
F8 / F10 / F11 按钮

也可以点击右侧蓝色图标设置断点。

可以watch变量值，某个值改变，会显示！

在DOM Breakpoints右键，可以选择出现断点的方式，子节点被修改 / 属性被修改 / 被移出 - 出现断点。

如果在vue中，不用调试vue，可以忽略它。

Network

Preserve log - 保存上一次的请求
No throttling - 网速截流

01
More network conditions - 可以设置user agent 用户代理
可以修改 - 在请求资源中查看
user-agent: Mozilla/5.0 (BlackBerry; U; BlackBerry 9900; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0.187 Mobile Safari/534.11+

02
可以下载网络请求，如果出现问题，导入请求，可以测试哪里有问题！

Application

可以设置
Local Storage
Session Storage
Cookies

1
2
3
4
5
6
localStorage.setItem('name', 'jack')
localStorage.getItem('name')
localStorage.clear('name')

document.cookie = 'username = john'

总结

发现有许多需要了解的。。。Chrome调试非常实用！