我们学习JavaScript,最终代码运行在浏览器端,那么就需要我们熟练使用浏览器的开发者工具进行调试,这里以chrome浏览器的开发者工具为例:
点击
图标可以快速选择DOM节点
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d282b16d1cf04b97b4dd00098cc176a8.png)
点击
图标可以模拟设备尺寸
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/bf3c7ae3413744a2b58c9099931b22bd.png)
一、元素
可以查看DOM节点,以及选中的DOM节点对应的样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e1e2d5ed300e45c3a2ae1c93e48e7697.png)
在这里也可以更改节点内容以及样式内容
二、控制台
在控制台,我们可以输入JavaScript代码来执行
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/db86834755e64e1b8334af5f42882164.png)
三、源代码
在源代码,可以打断点调试
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/fa0e05d7eddb4532b19184d323ac8dd3.png)
四、网络
在网络,可以模拟网速
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ff30b18efe5c489f95b93c40e510fd6f.png)
可以查看网络请求,但是不能改变网络请求
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/3a03ee75e9b543daac2336a9099264c7.png)
应用
在应用,可以看到cookie、local storage、session storage等 存在浏览器中的值
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7b50124c808b4f13b931c4061b824934.png)