✨Chrome DevTools 使用指☞北 - 来源面板概览 🔔

Anita_Sun
388 阅读2分钟

概览 🌈

Sources 面板包含三个部分：

“来源”面板的 3 个部分。

  1. 包含文件树的 Page 标签页。该页面请求的每个文件都列在此处。
  2. 代码编辑器 部分。在 Page 标签页中选择文件后， 相应文件会显示在此处
  3. Debugger 部分。用于检查网页 JavaScript 的各种工具。

Page 标签页 🐾

image.png

Page 窗格的组织结构：

  • 顶层（如上方屏幕截图中的 top）表示 HTML 框架。您可在以下位置找到top： 所访问的每个网页。top 表示主文档帧。

  • 第二个级别（例如上方屏幕截图中的 developers.google.com）代表一个来源。

  • 第三级、第四级等等，表示加载的目录和资源 从该源访问。例如，在上面的屏幕截图中，资源的完整路径 translated.svg?hl=zh-cn 为 https://developer.chrome.com/_static/images/translated.svg?hl=zh-cn。 image.png

代码编辑器 🐾

  • 使用编辑器窗格修改 CSS 和 JavaScript。DevTools 会更新页面以运行您的新代码

  • 如果您修改了元素的 background-color，则会发现更改已生效

    image.png

    image.png

  • 当您重新加载页面时，DevTools 会擦除您的 CSS 和 JavaScript 更改。

设置工作区 🎈

  • 默认情况下，如果您在 Sources 面板中修改文件，重新加载后这些更改会丢失页面。借助工作区，您可以将在开发者工具中所做的更改保存到文件中系统。

  • 运行您的项目，使得项目可以通过 localhost:8000 等网址进行访问

    image.png

  • 设置 workspace

    • 将该文件夹拖放到编辑器中的 Sources（来源）。
    • 点击选择文件夹链接，然后选择相应文件夹。
    • 点击 ➕ Add folder（添加文件夹），然后选择相应文件夹。

    image.png

    在顶部提示中，点击 Allow 以向开发者工具授予目录的读取和写入权限。

    image.png

  • 在 Workspace 标签页中，现在 index.html、script.js 和 styles.css 旁边有一个绿点。这些绿点表示开发者工具已在页面的网络资源与 devtools-workspace-demo 中的文件之间建立了映射。当您修改相关的文件内容，内容的变化会同步到本地文件夹。

    image.png

创建、保存和运行代码段 🐾

  • 代码段是可在任何网页上运行的脚本。假设您反复输入 控制台中的以下代码，以便将 jQuery 库插入到网页中，让您 可以从控制台运行 jQuery 命令：

    let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

  • 不过，您可以将这段代码保存在代码段中，只需点击几下按钮，即可随时运行 您需要它。DevTools 会将代码段保存到您的文件系统。例如，检查一个代码段 用于将 jQuery 库插入到页面中。

    image.png

  • 如需运行代码段，请执行以下操作：

    • 在 Snippets 窗格中打开文件，然后点击底部操作栏中的 Run 图标 ▶。
    • 打开命令菜单，删除 > 字符，输入 !，然后输入您的 代码段，然后按 Enter 键。
avatar
文章
阅读
粉丝