如何将 Chrome 用作 IDE

Chrome DevTools 已经取得了长足的进步，并且随着时间的推移，它开发了完整的集成开发环境 (IDE) 的功能。了解如何开始将其用作方便的 IDE。

多年来，Chrome DevTools 已经从简单地检查 DOM、CSS 和 JavaScript 文件发展成为具有对本地项目文件的写访问权限的集成开发环境。在这篇文章中，我们将演示如何轻松开始使用 Chrome 作为 IDE。我们将创建本地项目文件，将它们添加到 Chrome 工作区并编辑我们的项目文件以从浏览器中进行本地更改。

设置项目文件

出于本演示的目的，让我们创建一个包含 HTML 文件、CSS 文件和 JavaScript 文件的项目文件夹。为此，您可以通过运行以下命令来创建项目目录和文件：

// create folder in the Desktop
$ mkdir Chrome-Dev-IDE // change into the created folder
$ cd Chrome-Dev-IDE // create another folder 'src'
$ mkdir src // create another folder 'img' for images
$ mkdir img // change into the 'src' folder
$ cd src // Create three project files
$ touch index.js
$ touch index.html
$ touch index.css

重击

我们将使用 VSCode 在本地托管我们的项目文件；但是，我们将通过 Chrome 与它进行交互。现在，当我们在 VSCode 中打开项目文件夹时，它将具有以下结构：

出于演示目的，让我们使用一些演示代码片段来更新这些文件。打开index.html文件并使用以下代码更新它：

    <!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="index.css"></head><body><br><div class="row"><div class="column"><div class="card"><img src="./img/janedoe.png" alt="Jane" style="width:100%"><div class="container"><h2>Jane Doe</h2><p class="title">CEO & Founder</p><p>Some text that describes me lorem ipsum ipsum lorem.</p><p>example@example.com</p><p><button id="jane" class="button" onclick="contactJane()" >Contact</button></p></div></div></div><div class="column"><div class="card"><img src="./img/lucasdoe.png" alt="Mike" style="width:100%"><div class="container"><h2>Mike Ross</h2><p class="title">Art Director</p><p>Some text that describes me lorem ipsum ipsum lorem.</p><p>example@example.com</p><p><button id="mike" class="button" onclick="contactMike()">Contact</button></p></div></div></div><div class="column"><div class="card"><img src="./img/johndoe.png" alt="John" style="width:100%"><div class="container"><h2>John Doe</h2><p class="title">Designer</p><p>Some text that describes me lorem ipsum ipsum lorem.</p><p>example@example.com</p><p><button id="john" class="button" onclick="contactJohn()" >Contact</button></p></div></div></div></div><script src="index.js"></script></body></html>

HTML

接下来，让我们为 HTML 文件添加一些样式，打开我们的index.css文件并像这样更新它：

    html {box-sizing: border-box;}*, *:before, *:after {box-sizing: inherit;}.column {float: left;width: 33.3%;margin-bottom: 16px;padding: 0 8px;}@media screen and (max-width: 650px) {.column {width: 100%;display: block;}}.card {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);}.container {padding: 0 16px;}.container::after, .row::after {content: "";clear: both;display: table;}.title {color: grey;}.button {border: none;outline: 0;display: inline-block;padding: 8px;color: white;background-color: #000;text-align: center;cursor: pointer;width: 100%;}  .button:hover {background-color: #555;}

CSS

最后，让我们将按钮与index.js文件关联起来。打开index.js文件并将以下代码添加到其中：

    function contactJane() {document.getElementById("jane").innerHTML = "Contact Made, wait for response";}function contactMike() {document.getElementById("mike").innerHTML = "Contact Made, wait for response";}function contactJohn() {document.getElementById("john").innerHTML = "Contact Made, wait for response";}

JavaScript

如果你index.html现在在浏览器中打开文件，你应该会得到这个漂亮的输出：

在 Chrome 上设置项目

精彩的。现在我们已经创建了一个基本的 HTML、CSS 和 JavaScript 项目，现在让我们看看如何利用 Chrome 的 IDE 功能直接从浏览器对项目的本地文件进行更改。首先，让我们在 Chrome DevTools 中打开我们的项目文件夹。

有几种方法可以做到这一点，但我会选择最方便的方法，即将我的文件夹从桌面直接拖放到我的 Chrome 工作区。如果你不能做到这一点，别担心——我会引导你完成它。

打开 Google Chrome 浏览器并打开您的 Chrome 开发工具。（如果您还不知道，可以使用Command + Options + JMac 或Control+Shift+JWindows 上的快捷方式打开控制台）。

现在切换到Sources选项卡：

就像屏幕上的说明一样，我们可以将项目文件夹拖放到可见的工作区窗口中。将文件夹拖入工作区后，您将收到提示：

单击Allow，您的项目文件夹将在Filesystem导航器下方的选项卡中正确设置。现在，当您单击Filesystem选项卡时，您应该能够看到您的项目文件：

现在我们的项目已在 Chrome 上正确设置，我们可以继续直接从 Chrome 开始更改我们的项目文件。首先，为了简单起见，让我们来玩一下我们团队成员的名字。

使用项目文件

现在我们已经看到直接从浏览器更新我们的项目文件是多么简单。在早期版本的 Chrome 中，如果我们回到本地项目文件，我们刚刚在浏览器上所做的最新更改将不会生效。它只会对浏览器进行更改，如果我们想授予浏览器对本地项目文件的写入权限，我们需要右键单击任何项目文件并选择map to file system resources. 这将允许 Chrome 更新我们的本地项目文件。

但是，在最新版本的 Chrome 中，当您单击Allow将项目文件夹拖到 Chrome 工作区时出现提示的按钮时，默认情况下允许使用此选项。

让我们再做一个演示，向您展示 Chrome 是如何更新本地项目文件的：

精彩的。现在让我们与我们的 CSS 文件进行交互。在本次演示中，我将 CSS 按钮的悬停属性（目前是灰色的）更改为红色阴影，如下所示：

最后让我们与我们的 JavaScript 文件进行交互。在我们点击Contact按钮的那一刻，文本变为“已联系，等待回复”。让我们更改它并将文本更新为“您已联系 [name]”。我们将从index.js浏览器更新我们的 JavaScript 文件，看看它如何更新我们的示例应用程序：

限制

既然我们已经看到了我们可以用 Chrome 做的所有惊人的事情，让我们来看看它的局限性。

截至最新版本的 Chrome (65)，DevTools 仍然不保存在元素面板的DOM 树中所做的更改。改为在Sources面板中编辑 HTML 。
如果您在“样式”窗格中编辑 CSS，并且该 CSS 的源是 HTML 文件，则 DevTools 不会保存更改。改为在“源”面板中编辑 HTML 文件。

结论

在这篇文章中，我们演示了如何使用 Chrome DevTools 作为 IDE 来构建小型项目。相对于您可以使用 Chrome 开发工具完成的所有其他令人惊奇的事情，这只是杯水车薪。为了加深您的知识并更好地理解它提供的所有优秀功能，请随时查看官方文档。