1.手抓手带你使用vue devtools
2.你可能不知道的源码ChromeDevtools实用功能
3.Chrome 开发者工具 workspace 的概念
手抓手带你使用vue devtools
以下是关于如何安装和使用Vue Devtools的步骤： 首先，从GitHub下载Devtools源代码，源码然后在工程目录下执行`npm install`和`npm run build`来编译。源码 确保在编译完成后，源码修改`shells/chrome/manifest.json`中的源码`persistant`属性为`true`。 在浏览器右上角设置>更多工具>扩展程序中，源码rust 源码生成开启开发者模式，源码并将`shells/chrome`文件夹拖拽到浏览器扩展程序界面。源码 要使用Vue Devtools，源码需要确保Vue.config.devtools为`true`。源码Devtools提供了几个面板： Components面板显示组件信息，源码包括data、源码props和computed属性。源码点击组件可编辑data，源码scratch画图源码选中组件后，源码可通过`Inspect Vue component`或鼠标右键快速定位。 Vuex面板记录mutations，支持筛选、导出/导入state、查看commit、revert和Time Travel功能。 Events面板记录$emit事件及其详细信息。 Routing面板监控路由变化，包括history和routes信息。 Performance面板用于性能分析，包括Frames per second和Component render，展示渲染情况和组件生命周期钩子执行时长。数字公式源码 最后，Devtools的Settings选项允许你个性化设置，如组件命名风格、Vuex面板后台运行等。你可能不知道的ChromeDevtools实用功能
今天来分享ChromeDevTools的个实用调试功能！1.保留日志当我们刷新完页面之后，通常控制台的Console面板就会被清空。如果想保留控制台的日志，就可以在设置中勾选Preservelog选项以保留控制台中的日志。
2.代码覆盖率我们可以打开设置，在Experiments中勾选Recordcoveragewhileperformancetracing选项。
在面板下方的Coverage面板中点击红色按钮以记录页面的代码覆盖率：
代码覆盖率使用动态分析法来收集代码运行时的覆盖率，让开发者知道有代码在页面上真正的源码代码视频使用。动态分析是指在应用运行状态下收集代码执行数据的过程，换句话说，覆盖率数据就是在代码执行过程中通过标记收集到的。
3.显示重绘在浏览器的开发者工具中可以通过开启显示重绘选项以查看页面在执行操作时哪些元素会发生重绘。
在控制台右上角三个点中的Moretools选项中开启Rendering选项卡：
在Rendering（渲染）选项卡中开启Paintflashing：
当刷新页面时，显示绿色的区域就是重新绘制区域。
4.检查动画Chrome的开发者工具不仅可以调试样式，还可以调试动画，可以在控制台右上角三个点中的Moretools选项中开启Animations选项卡：
当页面的动画执行时，就会在时间轨道上查看所有的动画，点击其中一个动画可以懂得执行过程以及时间轴：
我们可以在时间轴上定位到任一时刻的动画帧，也可以拖动左右两端的圆点来修改动画的延迟和周期，修改之后可以在属性面板看到对应的kiftd源码下载CSS样式。
5.截图Chrome浏览器内置了截图功能，可以在浏览器开发者工具中使用Ctrl+Shift+P（Windows）或者Command+Shift+P（Mac）快捷键打开搜索来查找screenshot：
这里有四个选项：
第一个：截取自选区域；
第二个：截取整个网页；
第三个：截取当前节点；
第四个：截取当前屏幕。
截图完成后自动下载到下载目录，打开浏览器的下载框或本机的下载目录即可看到。
6.LocalOverrides我们可以使用本地资源覆盖网页所使用的资源，比如可以使用本地CSS文件覆盖网页的css文件，修改样式。将本地的文件夹映射到网络，在Chrome开发者功能里面对CSS样式的修改都会直接改动本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。
详见：/post/
8.事件监听器的断点有时应用会在用户发生交互时出现问题，这时我们就可以添加事件监听器添加断点来捕获这些事件以检查交互时的问题。可以在Source面板右侧的EventListenerBreakpoints中勾选相应的事件：
9.DOM操作的断点当页面的内容发生变化时，如果想要知道是哪些脚本影响了它，就可以给DOM设置断点。我们可以右键点击需要设置断点的DOM元素，在弹出的菜单中点击Breakon以选择合适的断点。
可以看到，Breakon中有三个选项：
SubtreeModifications：子节点（内容、属性）修改通知，常用在子节点内容发生变化后，来定位源码；
AttributesModifications：当前节点的属性修改通知，常用在节点的className等属性被修改后，来定位源码了；
NodeRemoval：当前节点移动时通知，常用在节点被移除时，定位源码。
.异步请求的断点XHRbreakpoints可以用于异步请求的断点，点击加号即可添加断点规则，输入请求的URL地址（片段），会在请求地址包含对应字符串的异步请求发出的位置自动停止：
原文：/post/Chrome 开发者工具 workspace 的概念
使用工作区功能在Chrome开发者工具中对文件进行编辑与保存。
工作区允许开发者将DevTools中的修改同步至本地计算机上的源代码文件。例如，假设你有一份网站源代码在桌面上，同时运行本地Web服务器，通过localhost:访问该网站，并使用DevTools调整CSS。启用工作区后，DevTools中的任何CSS更改将保存至桌面源代码。
然而，工作区在现代框架的源代码转换过程中存在局限性。框架可能会优化源代码，使其更快运行，但工作区通常能通过源映射功能映射优化后的代码至原始源代码。不过，不同框架对源映射支持的差异导致工作区无法支持所有变化。例如，工作区不支持Create React App。
本地覆盖是另一个与工作区类似的功能。当您希望在页面上试验更改且不关心这些更改如何映射至页面源代码时，使用本地覆盖功能。当前加载到Chrome开发者工具的网页文件夹颜色发生变化时，使用此功能。
直接在Chrome开发者工具中修改index.html文件，并添加Jerry的字符串。刷新页面后，修改会被持久化。
在Elements标签页直接修改DOM不会持久化至HTML文件。原因在于，Elements面板显示的节点树反映页面的DOM，而浏览器通过网络获取HTML，解析HTML，生成DOM节点树。页面的最终状态可能与原始HTML显著不同，受到HTML、JavaScript和CSS的影响。因此，DevTools难以确定应保存更改的位置。
在Sources标签页修改HTML和JavaScript文件可以实现持久化。更多Jerry的原创文章，可访问："汪子熙"。
