1.使用浏览器这么多年，源码你真的源码了解DevTools吗？
2.手抓手带你使用vue devtools
3.Chrome 开发者工具 workspace 的概念

使用浏览器这么多年，你真的源码了解DevTools吗？

       VOL

       -

       今天距年天

       ITester软件测试小栈第次推文

       本文字，阅读约需9分钟

       ChromeDevtools，源码我们每天使用频繁的源码Web测试工具，具备强大的源码boltdb源码在线阅读调试功能。然而，源码我们仅用到了它的源码一部分功能。掌握Devtools对于提升测试效率和专业性至关重要。源码接下来，源码我们将深入探讨Devtools的源码常用功能。

       认识 Devtools

       Devtools对于不同角色有着独特价值：

       用处

       开发者：调试代码，源码优化性能

       测试人员：定位问题，源码亚当理论公式源码提高沟通效率

       产品经理：快速验证设计，源码提升用户体验

       Devtools 8个常用面板

       Elements（元素）

       通过Elements面板，源码测试人员可以轻松修改DOM结构和CSS样式，实时查看页面变化。

       Console（控制台）

       控制台用于记录调试信息，帮助测试人员快速定位JavaScript错误。

       Sources（源代码）

       Sources面板展示了所有页面源代码，支持设置断点、编辑本地文件等操作。

       Network

       Network面板监控HTTP请求，优化页面加载性能。

       Performance（性能分析）

       Performance面板跟踪页面生命周期，医药核价系统源码提高性能。

       Memory（内存）

       内存面板监控应用内存使用情况，优化资源管理。

       Application（应用信息）

       Application面板显示加载资源的详细信息，帮助测试人员分析应用状态。

       Security（安全分析）

       Security面板检查安全性问题，确保应用安全。

       Devtools 高频用途

       调整Devtools位置

       灵活调整Devtools位置，提高测试效率。

       定位前后端Bug

       利用Console和Network面板快速定位问题来源。

       查看/编辑元素

       在Elements面板修改元素样式，立即在浏览器中查看效果。自制遥控小车源码

       移动端适配

       模拟不同设备查看页面适应性，确保跨平台兼容性。

       下载/视频

       使用Devtools保存不支持直接下载的或视频。

       更多实用技能

       关注ITester软件测试小栈，获取更多Devtools技巧，与测试专业人士互动，共同提升测试技能。

手抓手带你使用vue devtools

       以下是关于如何安装和使用Vue Devtools的步骤：

       首先，从GitHub下载Devtools源代码，然后在工程目录下执行`npm install`和`npm run build`来编译。

       确保在编译完成后，修改`shells/chrome/manifest.json`中的vc文件源码源`persistant`属性为`true`。

       在浏览器右上角设置>更多工具>扩展程序中，开启开发者模式，并将`shells/chrome`文件夹拖拽到浏览器扩展程序界面。

       要使用Vue Devtools，需要确保Vue.config.devtools为`true`。Devtools提供了几个面板：

       Components面板显示组件信息，包括data、props和computed属性。点击组件可编辑data，选中组件后，可通过`Inspect Vue component`或鼠标右键快速定位。

       Vuex面板记录mutations，支持筛选、导出/导入state、查看commit、revert和Time Travel功能。

       Events面板记录$emit事件及其详细信息。

       Routing面板监控路由变化，包括history和routes信息。

       Performance面板用于性能分析，包括Frames per second和Component render，展示渲染情况和组件生命周期钩子执行时长。

       最后，Devtools的Settings选项允许你个性化设置，如组件命名风格、Vuex面板后台运行等。

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的原创文章，可访问："汪子熙"。