EditfileswithWorkspaces本教程提供了设置和使用工作区的实践练习，以便您可以在自己的项目中使用它们。工作区使您能够将在DevTools中所做的更改保存到计算机上存储的源代码中。概述工作区使您能够将在Devtools中所做的更改保存到计算机上同一文件的本地副本。例如，假设：(1)您的桌面上有站点的源代码。(2)您正在从源代码目录运行本地Web服务器，以便可以在localhost:8080访问该站点。(3)您在GoogleChrome中打开了localhost:8080，并且您正在使用DevTools更改网站的CSS。启用工作区后，您在DevTools中所做的CSS更改将保存到桌面上的源代码中。限制如果您使用的是现代框架，它可能会将您的源代码从一种易于维护的格式转换为经过优化以尽快运行的格式。在源映射的帮助下，工作区通常能够将优化后的代码映射回原始源代码。但是在源映射的使用方式上，框架之间存在很多差异。Devtools根本无法支持所有更改。例如，Workspaces不支持CreateReactApp。相关功能：本地覆盖本地覆盖是另一个类似于工作区的DevTools功能。当您想要试验对页面的更改并需要在页面加载时查看这些更改，但您不关心将更改映射到页面的源代码时，请使用本地覆盖。只有当前加载到Chrome开发者工具中的web应用程序对应的文件夹的颜色发生了变化：直接在Chrome开发者工具中修改index.html：添加来自Jerry的字符串：刷新后，这个变化也被持久化了：注意如果您直接在开发者工具的元素选项卡中修改DOM，修改将不会持久化到HTML文件中。原因如下：您在“元素”面板上看到的节点树代表页面的DOM。为了显示页面，浏览器通过网络获取HTML，解析HTML，并将其转换为DOM节点树。如果页面有任何JavaScript，则该JavaScript可能会添加、删除或更改DOM节点。CSS还可以通过content属性改变DOM。浏览器最终使用DOM来确定它应该向浏览器用户呈现什么。因此，用户看到的页面的最终状态可能与浏览器获得的HTML有很大不同。这使得DevTools很难确定在Elements面板中所做的更改应该保存在哪里，因为DOM受HTML、JavaScript和CSS的影响。简而言之，DOM树!==HTML。我们可以修改HTML和JavaScript文件并将它们保存在“源”选项卡中。更多Jerry原创文章在这里：《王子熙》：
