非零基础自学前端最后一遍一 HTML+CSS 5 额外知识补充2 5.4 Chrome开发工具的使用

朴灿烈づ我的快乐病毒、 2024-03-25 09:26 68阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  5 额外知识补充2
         *   *  5.4 Chrome开发工具的使用
             *   *  5.4.1 Chrome浏览器开发者工具

![在这里插入图片描述][ee47391cdc114bec907ad294cddff5ff.png_pic_center]

#### 一 HTML+CSS ####

#### 5 额外知识补充2 ####

##### 5.4 Chrome开发工具的使用 #####

###### 5.4.1 Chrome浏览器开发者工具 ######

![在这里插入图片描述][07d5cbbc19bd4c879bfee49c697ef4c9.png_pic_center]

*  打开Chrome调试工具：
    
     *  方式一：右键 – 检查
     *  方式二：快捷键 – F12
 *  其他技巧：
    
     *  快捷键：ctrl+ 可以调整页面或者调试工具的字体大小；
        
        ![在这里插入图片描述][7fc5999214ee4f36b4c7ffa96f652a65.png_pic_center]
        
        鼠标滚轮也可以
     *  可以通过删除某些元素来查看网页结构;
        
        ![在这里插入图片描述][515bccc5c3314ad2b47231831ee7ee98.png_pic_center]
        
        ![在这里插入图片描述][94e4831bbb0145a48e4d3fd39c637028.png_pic_center]
        
        直接delete 就可以干掉
     *  可以通过增删css来调试网页样式;
        
        ![在这里插入图片描述][5ce35a12da344287992f14ca1eb56a6a.png_pic_center]

[ee47391cdc114bec907ad294cddff5ff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/726b6fa31c004eddbd6e90a12c5c8cd0.png
[07d5cbbc19bd4c879bfee49c697ef4c9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c714cd00f88a4b1d82c8024326a103bc.png
[7fc5999214ee4f36b4c7ffa96f652a65.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b4e02fc1e85144afbc5e820fccda286d.png
[515bccc5c3314ad2b47231831ee7ee98.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/877545218c1a4b16a3cd4e9e96c94155.png
[94e4831bbb0145a48e4d3fd39c637028.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/09167981d1044cf49b4bb58e3ad10cad.png
[5ce35a12da344287992f14ca1eb56a6a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/520020ee901841d7975aa438234e7e00.png