谷歌开发者工具 -来源/源码篇

• 控制台
• 元素
• 网络

Chrome DevTools - Sources来源/源码篇

• 官网平台

  • 核心功能
  • 来源信息
  1. 浏览文件操作
     • （1）使用标签功能浏览所有加载的资源
     • （2）了解页面布局结构
     • （3）查看文件具体内容
  • （2）页面布局结构解析方法
  • （3）详细信息展示方式

• 编辑 CSS 和 JavaScript

  • 生成、存储及执行代码块

  • 排查 JavaScript 异常或错误

  • （1）Sources 面板的功能说明

  • （2）单步调试

  • （3）查看当前变量状态

  • （4）作用域内的变量监控

  • （5）针对当前状态的表达式反馈

  • （4）调试小工具栏每个作用

    • 5.设置工作区
    • 6.搜索源文件打开(ctrl+p)

一、官网

https://developer.chrome.com/docs/devtools/open?hl=zh-cn

二、主要用途

• 访找文件
• 编辑 CSS 文件和 JavaScript 文件
• 编写并存储 JavaScript 源代码段（该代码块可以在任意网页中直接使用）
• 检查 JavaScript 代码逻辑
• 为开发环境配置工作区（为该工作区设置参数）

三、来源篇

1.查看文件

（1）网页标签，查看所有加载资源

（2）网页标签页得组织方式

• 最顶层（如上图所示的 top）由 HTML 帧 构成。在您访问的每个页面中均可找到这个 top 框架。
• 第二层（例如来自 developers.google.com 的链接）代表...源代码。
• 第三层及以后层级均代表从该源代码加载的目录与资源。

（3）查看文件内容

网页标签中点击文件，即可在编辑器标签页中查看文件内容

2.编辑 CSS 和 JavaScript

编写css 立即生效

编辑 JavaScript需要运行指定函数

3.创建、保存和运行代码段

4.调试 JavaScript

（1）Sources面板介绍

1. 展示文件树的标签页窗口。此标签页用于列出所有相关请求文件。
2. 在选择文件时，请注意：在编辑器标签页中进行操作。
3. 请检查页面中的 JavaScript 工具箱。

（2）断点调试

非仅依赖 console.log() 来推断 JS 错误位置, 更推荐采用 Chrome DevTools 的高级调试功能.该方法的基本思想是选择代码中需要停止执行的位置设置断点, 然后逐步执行每一行代码.

断点的类型繁多, 包括条件断点.记录断点以及修改变量的断点等.如有兴趣深入学习, 请参考官方文档链接:

https://developer.chrome.com/docs/devtools/javascript/breakpoints?hl=zh-cn

（3）检查变量值

1.作用域变量查看

2.表达式监听，通过表达式针对当前状态做输出

（4）调试小工具栏每个作用

从左至右依次介绍各个步骤如下：

1. 依次执行代码：即跳过当前断点后继续执行后续代码
2. 跳过函数调用：即在代码视图中不会深入调入被调用函数
3. 深入函数调用：如果当前没有被调用的函数，则会进入到下一个被调用的函数内部
4. 退出当前函数块：当程序处于一个方法体内时会退出该方法块
5. 逐步调试：通过逐步执行来模拟程序运行流程
6. 关闭断点标记：点击断点关闭按钮后变为蓝色状态

5.设置工作区

通常情况下，在 Sources 面板中对文件进行编辑后，在页面重新加载时会丢失所做的修改。

通过 Workspaces(工作区选项卡)，可以在文件系统中保存在 DevTools 中进行的更改。

这样一来，则可通过DevTools作为代码编辑工具使用。

工作区中的文件会自动识别你当前运行的应用程序；如果匹配到某个特定程序，则会在相应位置显示绿色图标。

6.搜索源文件打开(ctrl+p)