Chrome调试工具学习笔记

Chrome调试工具学习笔记

视频链接

文档链接

命令菜单简单使用

• 打开dev-tool：F12
• 打开命令菜单：ctrl/command + shift + p
• 切换主题：命令菜单输入dark / light theme，点击Reload DevTools
• 截屏：命令菜单输入screenshot，选择想要的截屏方式
  • node：选择一个node节点后，选择node截图，可以只截取某个节点。
• dock：改变调试工具的停靠位置。
  • 命令行输入dock，会显示dock to buttom、dock to left等选项；
  • undock可以把工具变成独立的页面；

常用的面板（tab）

Element

Console

Source

Network

Application

CSS调试

1.检查元素

• 查看元素：鼠标放到某个元素上-右键-检查。蓝色区域为该元素所占据区域，黄色区域为外边距（margin），绿色区域为内边距（padding）。
• 查看移动设备上页面显示效果：toggle device toolbar，快捷键：ctrl+shift+m。页面处还可以调节移动设备型号以及横屏。

2.查询DOM树

• 快捷键：ctrl+F。搜索指定的DOM节点。可以用文本查询String，CSS选择器selector、XPath三种方式搜索。

  • XPath：//section/p表示在全局路径下寻找section标签内的p标签。

• 还可以从console面板快速定位想要查找的节点：

  • inspect(document.getElementById('section_seven'))
    

  • 回车执行后自动跳转到相应节点

3.Console

Element元素

Styles面板

• auto-complete特性给元素添加样式：
  • 查找到相关的元素后，更改elemtent.style中的属性，可以改变元素样式。
  • 不记得样式名称，可以直接写属性，会自动匹配。
  • element.style下会显示所有定义了该元素样式的代码。代码上方会显示这段代码影响样式的方式，如某个属性继承自某段代码；右上角会显示这段代码的所处位置。
• :hover常驻：:hover可以在鼠标悬停时改变元素属性
  • 检查页面中有悬停变化的元素，如b站的投币按钮
  • ：hov-勾选:hover，常驻悬停
• 编辑class：
  • 改动一个class中某个元素的属性
  • 检查想要修改的元素
  • .cls-改变想修改的地方
• 复制样式
  • 检查元素
  • 对元素代码右键
  • 复制-复制样式（style）
  • 然后粘贴到element.style中

computed面板

• computed面板不按照class区分，显示检查元素的所有的属性。
• 可以搜索想要查看的属性，如color
• Rendered Fonts面板显示当前元素使用的字体。
• 要查看从父元素继承过来的元素时，需要勾选”show all“
• 勾选”Group”可以把不同属性按功能区分，如text、layout等

layout面板

把网页中的容器按照下面的方式分类。勾选可以看到指定的盒子模型。

• Grid网格布局
  • show track sizes：可以看到每个网格的size
  • show area names：可以看到不同网格的名字
  • extend grid lines：延长辅助线，便于我们观察
• Flexbox弹性盒子布局
• 如果网页元素中使用了grid或者flexbox布局，在代码后面会有标识。

Event Listeners面板

事件监听面板，列出该页面所有绑定的事件。点击remove可以去除这个监听事件

DOM Breakpoints面板-用来调试JS

详情见JS调试

Properties面板

显示所有节点的属性

Accessibility面板

无障碍

Console控制台

• 快捷键：ctrl+shift+J

• 执行语句

  alert(1)
  

  let a = 1
  

  console.log/error/warn/table(用表格表示数组)/clear/group(按组显示)/time(显示语句执行时间)/assert/trace
  

  • 自己再挖挖更多的用法

• $_返回上一条语句的执行结果

• $0返回上一个选择的Dom节点（$1、$2以此类推）

console.log(error warn table clear group time assert trace)

• ``log级别筛选

  • 过滤器旁边可以选择info/warn/error

Source资源

JavaScript调试

• debugger；此条语句在指定位置暂停。
• 打开菜单，输入enable code folding打开折叠代码功能
• 检测功能：watch面板输入想要检测的值，可以检测该变量
• Element-DOM breakpoints 打断点
  • element代码处右键-break on。出现三个选项：subtree modifitions、attribute modifitions、node removal.三者有什么区别？
    • subtree modifitions当前节点为根节点，子节点变化时断点
    • attribute modifications节点属性变化时断点
    • node removal节点被删除时断点
• Event Listener Breakpoints事件监听断点
• vue中断点

Network请求

name-请求名称、status-当前请求的状态码、type-资源的类型、initiator-什么东西发起的请求、size-资源的大小、time-发送请求的时间、waterfall-图形化的瀑布流。

其中，waterfall可以点开查看更详细的信息：请求时的等待时间、队列中的时间、下载的时间等。

• stop recording network log：不再监听网页中发起的网络请求
• clear：清空
• filter：筛选指定类型的请求
• preserve log：勾选该选项，会保留历史的请求记录。我们可以用于在网页跳转或刷新时，用该功能记录网页跳转前的信息
• throtting：节流器，可以用来模仿用户的网络状态，如快/慢3G网络、离线网络等。还可以自定义信息。
• more network conditions：
  • user agent：取消勾选改变浏览器版本（但是内核不变）。改变之后会有一个文本框，里面有一个链接，这个链接是我们设置的浏览器，发起请求时，产生的请求头的一个属性。这个属性的名字就叫user agent。
• HAR file：可以导入导出，如果网页中有问题，我们不便重现时，我们可以导入他人的har文件，模拟他当时的状态。

点开某一个请求，我们可以看到该请求的信息：

• General：通用的信息：请求地址、状态码、请求方式、远程地址等等
• Response Headers：服务器返回的头部
• Request Headers：浏览器发起的头部。

Application

可以看到一些键值对形式的数据。

• local storage：当地存储的数据。只能手动删除

  • 设置一对local storage

    localStorage.setItem('key','value')
    

  • 查找一个local storage的值

    localStorage.getItem('key')
    

  • 删除一个键值对：

    localStorage.clear('key')
    

• session storage：会话存储的数据，网页一关全没了

• cookie：可以设置存储时间

  • 设置cookie

    document.cookie = "key=value"