Chrome DevTools浏览器开发者模式、Vue DevTools、vs和DevTools调试

目录

快捷键

option+cmd+I 上次打开的开发者模式

Electron：shift+ctrl+cmd+m

cmd+shift+c开发者模式处于Style

Shift  + Command+ N无痕私密

com/ctrl+R硬性刷新：忽略缓存，重新请求

com/ctr+Shift+R正常加载：缓存

Elements

根据鼠标位置  定位元素标签：cmd+shift+c

查看相应样式文件：command+click

DOM节点（增删改）调试：选中标签，鼠标右键

Styles

鼠标右键查看 当前位置的标签和style

点击标签：底部显示DOM结构

 悬浮style上：可增删改属性

点击:hover：css伪类

:focus：键盘或鼠标点击，无论是否有子元素。

:focus-visible：键盘导航（通过 Tab 键，如表单填写）

:focus-within：当元素本身或其包含的子元素获得焦点时，其父元素可以应用该样式。

:target - 选中，锚点

:hover - 悬停

:active - 按下

:visited - 已访问过

Computed：查看盒数值

*Event Listeners

Console

clear

彩色打印console.log("%c"+baseUrl, 'color:green')

Network

设置浏览器网速

请求发起者：Initiator

ws:WebSockets：主动推拉数据

Application

资源列表+（可改）本地存储Cookie、WebStorage（localStorage、sessionStorage）

Source 调试

Bug出现情况要精准描述，多尝试情景，才能找到原因

从数据源倒退，而不是从操作

page资源目录->webpack-yourecode

激活断点

批量断点

Content scripts: 插件Snippets: 便捷测试

​​​​​​​VS Code调试​​​​​​​：Node.js、JS

devtool​​​​​​​调试：react、vue等有devtool插件的框架

Vue Devtools

安装

Components（props、data、computed、route）

Timeline（记录了事件（Mouse\keyboard）的触发时间）

Routes（查看所有页面的路由）

设置

---

没讲到的可以查看

https://developer.chrome.com/docs/devtools

Microsoft Edge Developer documentation | Microsoft Learn

快捷键

option+cmd+I 上次打开的开发者模式

Electron：shift+ctrl+cmd+m

cmd+shift+c开发者模式处于Style

Shift  + Command+ N无痕私密

com/ctrl+R硬性刷新：忽略缓存，重新请求

com/ctr+Shift+R正常加载：缓存

Elements

根据鼠标位置  定位元素标签：cmd+shift+c

查看相应样式文件：command+click

DOM节点（增删改）调试：选中标签，鼠标右键

• Subtree modifications: 子节点删除或添加时
• Attributes modifications: 属性修改时
• Node Removal: 节点删除时

Styles

鼠标右键查看 当前位置的标签和style

点击标签：底部显示DOM结构

 悬浮style上：可增删改属性

点击:hover：css伪类

模拟元素的伪状态，方便调试

:focus：键盘或鼠标点击，无论是否有子元素。

:focus-visible：键盘导航（通过 Tab 键，如表单填写）

:focus-within：当元素本身或其包含的子元素获得焦点时，其父元素可以应用该样式。

/* 表单整体在其内部字段获得焦点时改变背景颜色 */
form:focus-within {
  background-color: #f0f0f0;
}

:target - 选中，锚点

/* 被选中时的样式 */
#section1:target {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

:hover - 悬停

:active - 按下

:visited - 已访问过

Computed：查看盒数值

*Event Listeners

• Ancestors 是否显示祖先上绑定的事件

"passive"（被动）：监听器不会调用 preventDefault() 来阻止事件的默认行为。

对于优化滚动性能非常有用，因为它可以告诉浏览器不需要等待监听器完成执行才继续进行滚动。

"blocking"（阻塞）：会调用 preventDefault() 来阻止事件的默认行为。

用于处理特定的用户交互，需要自定义行为或防止某些不希望发生的操作。

Framework listeners (建议勾上)勾上后浏览器会处理主流框架的绑定事件 

Console

clear

彩色打印console.log("%c"+baseUrl, 'color:green')

Network

设置浏览器网速

请求发起者：Initiator

ws:WebSockets：主动推拉数据

在单个 TCP 连接上进行全双工通信的协议，允许客户端和服务器之间的实时数据传输。

服务器可以主动向客户端推送数据，而不需要客户端不断发起请求。

Application

资源列表+（可改）本地存储Cookie、WebStorage（localStorage、sessionStorage）

Source 调试​​​​​​​

• Bug出现情况要精准描述，多尝试情景，才能找到原因

• 从数据源倒退，而不是从操作

page资源目录->webpack-yourecode

激活断点

批量断点

Content scripts: 插件
Snippets: 便捷测试

​​​​​​​VS Code调试​​​​​​​：Node.js、JS

VS Code本身作为编辑器，最大的优点是可以一边编辑源码一边断点调试，调试功能完备，具有devtool没有的一些高级断点功能，

对于Node.js和JavaScript调试效率很高；

但是Vue、React效率可能不如浏览器，

因为调试时打开的浏览器实例可能会无法持久化cookie、无法使用Vue、React的devtool，可能会造成一些阻碍

devtool​​​​​​​调试：react、vue等有devtool插件的框架

浏览器的devtool是浏览器配套的开发工具，可以审查网页元素、查看控制台、对源码进行断点、查看内存、持久化数据等等功能，可以说所有和网页相关的内容都可以去查看，网站开发功能齐全。

缺点自然就是不如编辑器打断点实时快速灵活，需要手动去找到源代码的位置，相当于在浏览器里又做了一边找代码的操作，比较麻烦。但是可以使用Vue、React的开发插件，较为方便。

Vue Devtools

安装

打开谷应用商店，搜索 vue devtools并安装

 beta版也是vue3和vue2都可

打开控制台就有一个 Vue 的 tab

Components（props、data、computed、route）

加载时间

Timeline（记录了事件（Mouse\keyboard）的触发时间）

Routes（查看所有页面的路由）

当接手一个老的项目的话，这个是非常有用的，尤其是在路由是由后端拼接而成的场景

设置

Component names 设置组件名称的显示格式

Editable props 是否允许编辑props

Hightlight updates 当更新的时候是否高亮

1. Theme(主题色)
2. Menu Step Scrolling（菜单或工具栏中进行逐步滚动的操作。这种功能通常用于在菜单或工具栏中有大量选项时进行浏览和选择。）
3. Performance monitoring （性能监控）推荐开启，
4. Update tracking（更新追踪）
5. Debugging info（调试信息）