Chrome 开发者工具 workspace 的概念

Edit files with Workspaces

本教程提供设置和使用工作区的实践练习,以便您可以在自己的项目中使用工作区。 工作区使您能够将在 DevTools 中所做的更改保存到存储在计算机上的源代码中。

Overview

工作区使您能够将在 Devtools 中所做的更改保存到计算机上同一文件的本地副本。 例如,假设:

(1) 您的桌面上有站点的源代码。 (2) 您正在从源代码目录运行本地 Web 服务器,以便可以通过 localhost:8080 访问该站点。 (3) 您已经在 Google Chrome 中打开了 localhost:8080,并且您正在使用 DevTools 来更改站点的 CSS。

启用工作区后,您在 DevTools 中所做的 CSS 更改将保存到桌面上的源代码中。

Limitations

如果您使用的是现代框架,它可能会将您的源代码从易于维护的格式转换为经过优化以尽快运行的格式。 Workspaces 通常能够在源映射的帮助下将优化后的代码映射回原始源代码。 但是框架之间在如何使用源映射方面存在很多差异。 Devtools 根本无法支持所有的变化。

比如,Workspaces 不支持 Create React App.

Related feature: Local Overrides

Local Overrides 是另一个类似于 Workspaces 的 DevTools 功能。 当您想对页面的更改进行试验,并且需要跨页面加载查看这些更改时,请使用本地覆盖,但您不关心将更改映射到页面的源代码。

只有当前被加载到 Chrome 开发者工具的 web 应用对应的文件夹颜色改变了:

直接在 Chrome 开发者工具里修改 index.html:

加上 from Jerry 的字符串:

刷新之后,这个更改也被持久化了:

注意,如果直接在开发者工具 elements 标签页里修改 DOM,则修改不会持久化到 HTML 文件里。

原因如下:

您在 Elements 面板上看到的节点树表示页面的 DOM。 为了显示页面,浏览器通过网络获取 HTML,解析 HTML,然后将其转换为 DOM 节点树。 如果页面有任何 JavaScript,该 JavaScript 可能会添加、删除或更改 DOM 节点。CSS 也可以通过 content 属性更改 DOM。 浏览器最终使用 DOM 来确定它应该向浏览器用户呈现什么内容。 因此,用户看到的页面的最终状态可能与浏览器获取的 HTML 有很大不同。

这使得 DevTools 难以确定应保存在 Elements 面板中所做更改的位置,因为 DOM 受 HTML、JavaScript 和 CSS 的影响。

简而言之,the DOM Tree !== HTML.

我们在 Sources 标签页,即可修改 HTML 和 JavaScript 文件并持久化。

(0)

相关推荐

  • Chrome开发者工具使用指南

    前言 工欲善其事,必先利其器. 在前端工作中,我们常常使用到Chrome开发者工具去做各种各样的事情. 但是您真的了解这些开发者工具吗? 官方文档还是挺详细的:chrome-devtools文档. 但 ...

  • 问我Chrome浏览器的渲染原理(6000字长文)

    前言 对于HTML,css和JavaScript是如何变成页面的,这个问题你了解过吗?浏览器究竟在背后都做了些什么事情呢?让我们去了解浏览器的渲染原理,是通往更深层次的开发必不可少的事情,能让我们更深 ...

  • Chrome开发者工具不彻底指南:(3、性能篇)

    卤煮在前面已经向你们介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于通常的网站项目来讲,其实就是须 ...

  • Chrome开发者工具详解

    面板组成 包括控制器.过滤器.概览.请求列表.概要. 控制器--控制面板的外观与功能. 过滤器--过滤请求列表中显示的资源,按住Command(Mac)或Ctrl(Window/Linux),然后点击 ...

  • Chrome开发者工具详解(2)

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  • Chrome 开发者工具无法显示服务器正常返回的 HTTP 请求 - Failed to load response data

    今天做开发时遇到一个问题,Chrome 开发者工具 network 标签里,虽然一个 HTTP 请求已经成功从服务器端返回,但是 Chrome 开发者工具里,仍然显示 Failed to load r ...

  • Chrome 开发者工具里的 CSS grid editor

    Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别. Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一 ...

  • 使用 Chrome 开发者工具分析内存问题

    DevTools 显示了按功能划分的内存分配细目. 默认视图是 Heavy (Bottom Up),它在顶部显示分配最多内存的函数. Fix memory problems 内存泄漏很容易定义. 如果 ...

  • Chrome 开发者工具 performance 标签页的用法

    Analyze runtime performance 运行时性能是您的页面在运行时的表现,而不是加载. 就 RAIL 模型而言,本文介绍的方法对于分析页面的响应.动画和空闲阶段非常有用. 在隐身模式 ...

  • 使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题

    Optimize website speed 每当您着手提高站点的负载性能时,请始终从 audit 开始. 审计有两个重要功能: 它为您创建了一个基线来衡量后续更改. 它为您提供有关哪些更改将产生最大 ...