控制台初级使用指南

7ayl
177 阅读2分钟

先大致看一下概念

image.png

Elements模块

  • 可以通过红圈圈出的标志，来选中页面中的元素，查看页面中元素的具体数值以及代码 image.png

image.png

  • 还可以通过styles调整元素的样式

image.png

image.png

  • 还可以通过computed查看网页结构

image.png

Console模块

查看日志
  • 可以看到console.log打印的内容 image.png
调试
  • 当你在构建或调试网页，需要在控制台时运行一些语句来更改网页的外观或行为时，输入语句即可以得到即时的调试和反应 image.png
  • 也可以简单地进行算术运算或者定义函数并调用 image.png

Sources模块

在碰到bug时或者想查看变量数值时，可以在这里打上对应断点，刷新页面，去逐行运行代码，进行调试 如图点击‘512’打上断点进行调试，当鼠标悬浮在上面也可以看到变量，实现如下图 image.png

image.png

Network模块

Headers、Payload（里面是前端发送给后端的参数）、Preview（预览面板，用于资源的预览，响应资源进行了格式处理的内容）、Response（服务器对客户端请求的回应，响应资源未进行格式处理的内容）、Initiator、Timing】 格式处理：对后台传输过来的json、html、css等数据进行格式上的转换

Payload（里面是前端发送给后端的参数）

image.png  

Preview和Response里都是返回的数据，Preview是格式化过的，看起来更加直观!

image.png

  • 而Response未进行格式处理

image.png

  • Preview里message里为ok则成功

image.png

其他

鼠标所指内容可以清控制台

image.png

  • 清理请求列表 image.png image.png
  • 清理面板打印的数据 image.png image.png  
鼠标所指内容可鼠标所指内容可以直接执行完代码

image.png

红圈所圈按钮实现功能一样，可以使代码一行一行执行

image.png  

avatar
文章
阅读
粉丝