日常浏览网页或者开发的过程中，经常会用到F12开发者调试页面功能。用的日子多了，多少会对其中一些其他的功能产生疑问，到底这些标签有什么作用。这里简略介绍这些页面的意义。
- 元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
- 控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。
- 源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
- 网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。
- 性能（Performance）:查看页面性能
- Memory/Profiles: 主要是监控网页中各种方法执行时间和内存的变化，利用这个面板你可以追踪网页程序的内存泄漏问题，进一步提升程序的JavaScript执行性能。
- Application:该面板主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
- Security:通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS
- Audits：可以分析当前网页，可以快速的分析出哪些资源被使用、哪些资源没有使用，然后提出建议。
- 元素（Elements）：
- 查看元素代码：点击如图箭头（或用者用快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置 。
- 查看元素属性：可从被定位的源码中查看部分，如class、src，也可在右边的侧栏中查看全部的属性，如下图位置查看
- 修改元素的代码与属性：可直接双击想要修改的部分，然后就进行修改，或者选中要修改部分后点击右键进行修改，如下图：
注意：这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。
右边的侧栏个功能的介绍:如下图所示
- 控制台（Console）：
- 查看JS对象的及其属性
- 执行JS语句
- 查看控制台日志：当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉。
- 源代码（Sources）：
如上图，直接source页面左侧序号，即可将该行加入断点，在右侧“Breakpoints”里会显示所有断点列表。
- 网络（Network）：
请求文件具体说明：
- Header：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
- Preview：预览面板，用于资源的预览。
- Response：响应信息面板包含资源还未进行格式处理的内容
- Timing：资源请求的详细信息花费时间
- 性能（Performance）:
越來越发现前端工程中性能的重要性。不管使用什么技术栈，性能优化都是绕不过去的问题。
优化性能之前，首先要知道如何查看网页性能。
chrome 浏览器提供的performance就是一个最常用的工具。
摁 Control+shift+I 打开开发者工具就可以找到 performance (旧版本也叫Timeline)
- 使用方法：
- 点击面板左上方圆形按钮开始记录，然后操作页面，一段时间之后在面板上点击停止，即可得到这段操作过程的记录结果。
- 点击面板上左上方刷新按键，可以重新加载页面并获得该过程记录结果。
- 点击面板左上方禁止符号，可以清除记录结果。
- Memory/Profiles:
功能说明：
- Record JavaScript CPU Profile 用于分析网页上的JavaScript函数在执行过程中的CPU消耗信息。
- Take Heap Snapshot 创建堆快照用来显示网页上的JS对象和相关的DOM节点的内存分布情况。
- Record Allocation Timeline 从整个Heap角度记录内存的分配信息的时间轴信息，利用这个可以实现隔离内存泄漏问题。
- Record Allocation Profile 从JS函数角度记录内存的分配信息。
原文链接地址：https://blog.csdn.net/m0_37724356/article/details/79884006
扫一扫
1283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
