使用Google Chrome Workspace进行源代码编辑

在建立网站的过程中，通常使用浏览器的开发人员工具来调试和测试代码。 但是，由于我们在开发人员工具中所做的更改不会影响指定文件中的实际代码，因此我们必须在代码编辑器和浏览器之间来回切换以更新文件并查看结果。

为了简化这种传统的工作流程，谷歌浏览器最近推出了一项名为“ 工作区”的新功能，该功能使作者可以直接从浏览器进行调试，编辑和保存项目文件 。 在本文中，我们将带您逐步了解Workspace。

启用工作区

在撰写本文时，此功能被分类为实验性 ，因此默认情况下未启用。 要启用它，请转到chrome://flags/ 。 如下所示，将“开发人员工具实验”设置为启用 。

重新启动Chrome。

接下来，打开Chrome开发者工具（DevTools）。 转到DevTools 设置 ，该图标在开发者工具的右下方显示为齿轮图标。 然后转到“ 实验”选项卡，然后在“ 源面板”中勾选“ 文件系统”文件夹 ，如下所示。

重新启动DevTools，然后像之前一样进入“ 设置”页面。 这次，您将找到一个名为Workspace的新选项卡。 转到“工作区”选项卡，然后单击“ 添加文件系统”以添加项目文件夹，如下所示。

关闭“ DevTools设置”窗口，然后转到“ 源”面板。

在此选项卡的左侧栏中，您将找到刚添加的项目文件夹，包括CSS，HTML和JavaScript。 现在，在Chrome中查看您的项目，在文件中进行一些更改，保存更改，您还应该看到更改也反映在实际文件中。

但是，请记住，结果在编辑文件时不会立即可见。

要查看结果，请刷新Chrome。

最终思想

即使此功能可能无法完全替代代码编辑器，它还是一项很棒的功能，可以使代码调试过程更加简化和简化。 如上所述，Chrome Workspac是一项实验性功能，因此某些部分可能会更改该功能。

您是否尝试过使用Chrome Workspace？ 在下面的评论框中分享您的想法。

翻译自: https://www.hongkiat.com/blog/google-chrome-workspace/