1.Elements部分
首先按下F12键即可进入开发者工具页面，以CSDN博客页面为例，如下可以看到右侧是该页面所对应的前端代码。
在Elements部分的Styles模块下可以看页面的各个类别的样式等。
（1）点击.cls可以开启动态修改元素的class，输入字符串可以动态的给元素添加类名 ； （2）勾选，取消类名可以动态查看类名生效的效果； （3）点击具体的样式值（如字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域可以实时进行预览，但是刷新页面样式即刻恢复为原来的样式； （4）对于如何针对页面里的某个区域进行查看样式代码，可以点击Elements行最左边的按钮，或者选中想要修改的区域，鼠标右键检查即可（如图）；
可以清晰看到，点击按钮后选中我想要看的页面中的图片区域的样式，单击鼠标左键会自动指向该区域所对应的样式代码。在图片区域右键检查也可以达到此效果。
（5）对于某些伪类元素，我们可能不能通过以上形式选中查看样式，如CSDN的文章推荐标题区域，鼠标停留则会出现一条下划线，但是我们会发现如果还使用（4）介绍的方法是无法选中的，效果如图。
鼠标右键点击下划线部分，点击检查按钮，我们会发现虽然给出了代码的位置，但是鼠标离开后下划线又消失了。
那么我们有两种方法可以强制激活伪类，达到可以边修改此样式边查看页面的效果：
1）选中具有伪类的元素，右键，进入DOM树右键菜单，选择Force State下面的 ：hov并点击；这样我们就可以发现下划线即使在鼠标离开后仍旧存在。
2)直接点击右侧的：hov，选中：hover。
6）Computed下可以查看盒子模型，点击样式里面的箭头可以跳转到styles面板中的css规则。
2.Console部分
Console 部分通常是指浏览器开发者工具（DevTools）中的一个重要功能模块，名为Console 面板。它是开发者用来调试、检查和输出信息的地方，帮助开发者更好地理解代码的执行过程。 （1）console.log(): 开发者可以通过 console.log() 在控制台输出信息。这是调试代码时最常用的功能之一，可以帮助你查看变量的值、函数的执行结果、对象内容等。
（2）console.error(): 当代码中出现错误时，console.error() 可以输出错误信息，通常以红色字体显示，帮助开发者识别问题。
（3）console.warn(): 用于输出警告信息，通常以黄色字体显示，提醒开发者注意潜在的问题。
（4）consle.debug():用于输出调试信息。通常，输出的内容在浏览器的开发者工具中会以较低的优先级显示（有些浏览器默认只显示 console.log 输出）。它通常用于调试阶段的详细信息，但在生产环境中通常不建议使用。
(5) consle.info():用于输出一般性的信息，通常用于展示程序的状态、进度或其他常规信息。输出内容在控制台中显示为蓝色，代表该信息较为普通或非紧急。
(7)consle.table():将数组或对象以表格的形式展示在控制台中。这对于展示大量数据或结构化数据（如数组、对象数组）特别有用，可以使数据更易于阅读和理解。
(8) consle.dir():用于打印对象的详细结构信息，比 console.log() 更加详细和层次化。它通常用来展示对象的内部结构，特别适合查看 DOM 元素和复杂的对象。
(9)占位符：使用占位符（placeholders）能够使调试输出更加灵活和动态。占位符是通过在字符串中插入特定的占位符来表示变量或值，然后在调用 console 方法时传递实际的值来替换这些占位符。 给日志添加样式，可以突出重要的信息。
