如何将 Chrome 用作 IDE

一时失言乱红尘 2023-09-28 08:46 100阅读 0赞

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 中打开项目文件夹时，它将具有以下结构：

![674354c35fc3d36a406068e8b4bf19b0.png][]

出于演示目的，让我们使用一些演示代码片段来更新这些文件。打开`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`文件并将以下代码添加到其中：

JavaScript

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

![c3fa18080636d35d33eba2ec4476b9ba.png][]

### 在 Chrome 上设置项目 ###

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

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

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

![ea3e46b949fca1135c4a301b8124826c.png][]

现在切换到`Sources`选项卡：

![dc992f9c8df6502929c0b76db1409582.png][]

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

![abcc4a99283690ce6ef43b8fed625bd9.png][]

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

![3a50925fbefb1e624e324085401d7e7a.png][]

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

![d043d78b0f0f859433303824b966e4e6.gif][]

### 使用项目文件 ###

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

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

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

![4abb26c714b2c4d635c016ca8ad0111e.gif][]

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

![904e10cb9ac34a88917622f2901b7f02.gif][]

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

![71b4649a5aaaf7b1f143d60065fd1e93.gif][]

### 限制 ###

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

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

### 结论 ###

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

[674354c35fc3d36a406068e8b4bf19b0.png]: https://img-blog.csdnimg.cn/img_convert/674354c35fc3d36a406068e8b4bf19b0.png
[c3fa18080636d35d33eba2ec4476b9ba.png]: https://img-blog.csdnimg.cn/img_convert/c3fa18080636d35d33eba2ec4476b9ba.png
[ea3e46b949fca1135c4a301b8124826c.png]: https://img-blog.csdnimg.cn/img_convert/ea3e46b949fca1135c4a301b8124826c.png
[dc992f9c8df6502929c0b76db1409582.png]: https://img-blog.csdnimg.cn/img_convert/dc992f9c8df6502929c0b76db1409582.png
[abcc4a99283690ce6ef43b8fed625bd9.png]: https://img-blog.csdnimg.cn/img_convert/abcc4a99283690ce6ef43b8fed625bd9.png
[3a50925fbefb1e624e324085401d7e7a.png]: https://img-blog.csdnimg.cn/img_convert/3a50925fbefb1e624e324085401d7e7a.png
[d043d78b0f0f859433303824b966e4e6.gif]: https://img-blog.csdnimg.cn/img_convert/d043d78b0f0f859433303824b966e4e6.gif
[4abb26c714b2c4d635c016ca8ad0111e.gif]: https://img-blog.csdnimg.cn/img_convert/4abb26c714b2c4d635c016ca8ad0111e.gif
[904e10cb9ac34a88917622f2901b7f02.gif]: https://img-blog.csdnimg.cn/img_convert/904e10cb9ac34a88917622f2901b7f02.gif
[71b4649a5aaaf7b1f143d60065fd1e93.gif]: https://img-blog.csdnimg.cn/img_convert/71b4649a5aaaf7b1f143d60065fd1e93.gif
[Link 1]: https://developers.google.com/web/tools/chrome-devtools/sources