前后端分享之Chrome开发者工具

最新推荐文章于 2024-06-21 17:16:04 发布

原创

最新推荐文章于 2024-06-21 17:16:04 发布 · 787 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #调试 #前后端

本文详细介绍了Chrome开发者工具的使用方法，包括如何开启、Element面板的DOM树与节点选择、Styles样式调整、Computed计算样式查看、Console控制台功能、Network网络日志、Application的Storage编辑以及模拟设备调试。通过这些工具，开发者可以高效地调试和优化前端代码。

前端后分享之Chrome开发者工具

在前端项目的调试中，开发者们最常用的工具之一就是Chrome的Devtools了，类似的工具还有FireBug，也有浏览器扩展来辅助调试Vue等框架的项目。
这些工具的诞生让前端项目的开发调试变得十分的便利。今天我要来分享一些Devtools的一些基础的使用技巧。

在这里插入图片描述
注:FireBug已经停止开发合并进Firefox的内置开发者工具中;Chrome版本为 78.0.3904.87

在chrome中打开开发者工具:
1、点击右上⻆菜单->更多工具-> 开发者工具
2、在windows系统中默认快捷键「F12」，在MacOS中默认快捷键为「Command+Option+I」
3、在⻚面上右键，点击「检查」

020
Element面板:
Element面板有两大部分组成:
如图，左侧的为DOM树，右侧的为当前所选DOM节点的详细信息，包括:样式，最终计算的样式结果，事件列表，属性列表等等。

节点选择:
点击面板左上⻆的图标后，鼠标移动到⻚面中的某个元素就会显示该元素的盒模型和基础布局信息，点击选中后会显示该元素的DOM节点位置、样式等详细信息，你可以在这个面板中对它进行修改。
你也可以在DOM树中点选对应的DOM 节点，浏览器会在⻚面中高亮显示它所在的位置，可以实时的编辑，添加，删除节点。

Styles:
这块区域主要功能是显示和调整元素的样式。
有时我们需要在查看样式的时候看一下鼠标悬停或者选中时候的样式，那么我们需要先选中想要查看的元素，然后在Styles面板中点击它会展开一个面板

通常情况下在面板中勾选对应的状态即可让所选的元素显示对应的样式: