【工具使用】Chrome 调试工具DevTools详解

最新推荐文章于 2024-05-30 00:17:52 发布

退居二线程序员

最新推荐文章于 2024-05-30 00:17:52 发布

阅读量3.1k

点赞数 2

本文链接：https://blog.csdn.net/qq_42688959/article/details/108739265

版权

简介: JavaScript作为解释性语言，对于Web也来说，它的运行环境是浏览器（主要介绍Chrome），如果每次都是靠console.log()或alert()来打印临时变量进行程序调试，效率就太低了。

DevTools面板

在网页鼠标右击-检查 或者 F12打开DevTools

在这里插入图片描述

Chrome浏览器的DevTools为我们提供了十分强大的功能，界面按钮和信息繁多。

在这里插入图片描述
1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态

2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择

在这里插入图片描述

名称	描述
Elements 元素面板	，查看Web页面的`HTML与CSS`，最重要的是可以双击元素，对当前页面进行修改
Console 控制台面板	JavaScript输出信息的`控制台`，在这里可以查看到,JS的`错误信息`，也可以执行键入的,`JS脚本`
Sources 源代码面板	我们在这个页面对`JS代码进行调试，可设置断点`
Network 网络面板	可以明确的查看到`访问Web页面`所产生的`全部请求`（包括应答状态、响应时间、数据量等信息）和下载的资源文件，并可以模拟不同的网络状态（在线、离线、3G等）下对Web的加载情况，可以用于分析和优化网页加载性能
Performance 性能面板