网页开发人员使用方法.安装开启与关闭控制台Html

安装

开启和关闭

安慰

网页

CSS

脚本

DOM

网络

安装

安装非常方便。 在插件页面搜索“”，下载并安装，如图

开启和关闭

快捷键方法：F12；

单击工具栏中的图标可将其打开或关闭。 未开启时呈灰色。

窗口概览：

1：相关选项，如设置字体大小、界面位置等。

2：页面元素跟踪：当我们将鼠标放在页面元素上时，焦点会自动定位到其源代码上。 或者当我们将鼠标放在源代码上时，提示所在的元素。

功能导航

设置窗口最小化和独立窗口显示

信息区：主要显示源代码和分析结果。

辅助区域：显示一些辅助信息和命令行工具

安慰

控制台主要用于调试代码并显示各种错误和警告信息，并可以提示错误的文件和行号，方便调试。 此外，它还可以详细显示所有网站请求信息。 它还可以进行命令行操作，真是太强大了。

①：遇到错误就中断

②：“保留”，页面重新加载后不清除信息，“概览”，用于显示通话次数和通话次数

③：选择要显示的信息

④：命令行工具

网页

这是一个极其强大的HTML代码查看器，它支持实时编辑。 HTML代码以树的形式显示，层次结构清晰。 上面还显示了 DOM 层次结构。 另外，在辅助区域可以查看CSS样式（如下图）

style：显示当前html元素的所有css设置。 它将显示哪些属性被继承，哪些属性无效。 单击属性前的“”，可使属性暂时失效。 如果您想添加它们，我们可以实时编辑它们。 双击即可创建新的属性和属性值

计算的样式：显示继承的和计算的样式属性。

布局：这是一个很棒的工具，如上图3所示，它显示CSS标尺并且可以实时更改属性值。 对于网页设计来说再方便不过了。

DoM：该功能主要用于查看元素DOM信息，通过提供的搜索功能实现对DOM的快速准确定位，以及双击修改DOM节点属性或值。这可能是最强大的功能

CSS

为了编辑和查看完整的 CSS，以下是一些功能：

1.当鼠标放在属性上时，会提示字体颜色和图片。

2. 设置属性值时，可以按上下方向键进行微调或选择属性值。

脚本

这是一个功能齐全的js调试器，可以进行单步调试、断点设置、变量查看。 同时，可以使用右侧的监控功能来查看和统计脚本的运行时间。

断点设置：只需点击左侧行号即可设置断点，右键新建断点判断条件

监控表达式：点击“新建监控表达式”，输入任意表达式即可监控。

变量提示：当调试器停止时，将鼠标悬停在变量上将显示其值

堆栈跟踪：当调试器停止时，将显示函数调用堆栈，显示当前正在运行或等待返回的函数。

单步调试：点击信息区右上角，进行单步调试

DOM

该函数主要用于查看页面的DOM信息。 它可以通过提供的搜索功能快速准确地定位DOM，并可以双击修改DOM节点属性或值。 这里只会显示该对象的简单摘要，您可以通过双击它立即对其进行编辑。 并且还有自动填充功能。 此处更改属性值后，重新加载后仍会保持原来的状态。

网络

在网络调试器中，您可以查看文件加载时间线和状态信息。 还有具体的类别，比如媒体、图片字体……XHR功能对于调试AJAX非常方便，展开时可以查看具体的请求信息。 它对于分析网站性能评估也很有用。 很有帮助。

允许我们查看和管理，它有以下功能：

拒绝和接受来自特定网站的信息，

过滤、创建或删除。

您可以根据内容名称等进行排序和查看。

可以以‘原始数据’、json、xml格式查看

概括

由于篇幅限制，我就讲到这里了。 当然，功能远不止这些。 为了更好的使用它，应该与js调试功能结合起来，这样才能发挥它最大的作用。

原文链接：