Chrome的开发者模式及debug mode的使用

深藏阁楼爱情的钟 2023-10-11 12:12 27阅读 0赞

## Chrome的开发者模式及debug mode的使用 ##

*  #### 简介 ####
    
        Chrome谷歌浏览器开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。
          谷歌浏览器提供给了web开发者强大的debug功能。
    
    Dogfood: 寻找最新版本的Chrome开发者工具
    
    Chrome Canary: 总是有最新的DevTools
 *  #### 打开Chrome开发者工具 ####
    
        1. 在Chrome菜单中选择 更多工具 > 开发者工具
        
          2. 在页面元素上右键点击，选择 “检查”
        
          3. 快捷键 `Cmd+Opt+I/fn+F12 (Mac)`或`Ctrl+Shift+I (Windows)`
 *  #### Chrome谷歌浏览器的设备模式 ####
    
        使用设备模式构建完全响应式，移动优先的网络体验。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]

*  #### Chrome谷歌浏览器的元素面板 ####
    
    使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面.
    
    1.检查和调整页面
    
    2.编辑样式
    
    3.编辑DOM
    
        - 检查一个元素
        
          使用Elements(元素)面板在DOM树中检查页面中的所有元素。选择任何元素并检查应用于它的样式。
        
          这里有几种方法来检查一个元素：
    
    1.  右键点击页面上的任何元素并在右键菜单中选择Inspect(检查)。
    2.  按Ctrl+Shift+C（Windows）或Cmd+Shift+C（Mac）在检查元素模式下打开DevTools，然后将鼠标悬停在元素上。DevTools会在Elements(元素)面板中自动突出显示你鼠标悬停的元素。单击元素退出检查模式，同时保持元素在Elements(元素)面板中突出显示。
    3.  点击Inspect Element(检查元素)按钮(Inspect icon ) 进入检查元素模式，然后在某个元素上点击。
    
    4.在控制台中使用 inspect 方法，如 inspect(document.body)。
    
     *  浏览DOM
    
    1.  使用鼠标或键盘浏览DOM结构。
    
    2.折叠的节点旁边有一个向右的箭头：
    
    3.展开的节点旁边有一个向下的箭头：
    
    4.使用你的鼠标：
    
        单击一次来突出显示一个节点。
         要展开节点，请双击该节点上的任意位置或单击旁边的箭头。
         要折叠节点，请单击节点旁边的箭头。
    
    5.使用你的键盘：
    
    按Up Arrow(向上箭头)键选择当前节点上方的节点。  
    按Down Arrow(向下箭头)键选择当前节点下方的节点。  
    按Right Arrow(向右箭头)键展开折叠的节点。再次按下可移动到（现在展开的）节点的第一个子节点。您可以使用这个技巧快速浏览深层嵌套的节点。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 1]

*  #### Chrome谷歌浏览器的控制台面板 ####
    
    在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。详细可以看console控制台的使用指南。
 *  使用控制台面板
    
        `命令行交互`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 2]

*  #### Chrome谷歌浏览器的源代码面板 ####

在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。

1. 断点调试
    
        2. 调试混淆的代码
    
        3. 使用开发者工具的Workspaces（工作区）进行持久化保存

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 3]

*  #### Chrome 谷歌浏览器的网络面板 ####
    
        1. 使用网络面板了解请求和下载的资源文件并优化网页加载性能。
        
          2. 网络面板基础
        
          3. 了解资源时间轴
        
          4. 网络带宽限制

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 4]

*  #### Chrome谷歌浏览器的性能面板 ####

> Note: 在 Chrome 57 之后时间线面板更名为性能面板.

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

1. 如何查看性能
    
    2. 分析运行时性能
    
    3. 诊断强制的同步布局

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 5]

*  #### Chrome谷歌浏览器的内存面板 ####
    
    > Note: 在 Chrome 57 之后分析面板更名为内存面板.
    
    如果需要比时间轴面板提供的更多信息，可以使用“配置”面板,例如跟踪内存泄漏。
    
    1.JavaScript CPU 分析器
    
    2.内存堆区分析器

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 6]

*  #### Chrome谷歌浏览器的应用面板 ####
    
    > Note: 在 Chrome 52 之后资源面板更名为应用面板.

使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

管理数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 7]

*  #### Chrome谷歌浏览器的安全面板 ####
    
        1.使用安全面板调试混合内容问题，证书问题等等。
        
           2.安全

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019092313451016.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190923134535995.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190923134548992.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190923134652317.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190923134706258.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2019092313471980.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190923134730654.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20190923134743124.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20190923134758872.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70