如何使用 Google Developer Tools 在本地主机上找到 HTML 文件？答案

【问题标题】：How to locate an HTML file on localhost using Google Developer Tools?如何使用 Google Developer Tools 在本地主机上找到 HTML 文件？
【发布时间】：2014-10-20 06:23:56
【问题描述】：

我正在本地主机上使用 Wordpress 构建网站。我正在通过使用 Google 开发人员工具编辑 HTML 和 CSS 来学习网页的结构。我想知道我正在编辑哪个文件以及它在硬盘上的位置。

我已在标记的圆圈内编辑了元素的高度和宽度，但是当我尝试保存文件时，它会要求我提供一个我不知道的保存位置。左边一个是 HTML 代码，如何找到包含该 HTML 代码的文件？

【问题讨论】：

您在开发工具上所做的更改不会应用于您保存的网站文件，您必须打开文件本身并在那里进行更改。
浏览器的 Ctrl+S-save 工具一如既往的简陋；他们将修改 HTML，以便 CSS 和 JavaScript 文件引用本地文件夹，并且仅用于个人使用的基本页面；它与Web开发几乎没有关系。您正在运行的服务器不会告诉浏览器源文件在哪里（就像“google.com”不会告诉您源文件在其服务器上的位置一样），因此您可能需要对您正在使用的软件。（Apache Webserver？Tomcat？ASP.NET？）
查看codex.wordpress.org/Theme_Development 了解实际的 CSS 和 HTML 模板文件的位置。您可能会在相关站点的 Web 服务器文档根目录中查找 style.css。
我没有搜索和编辑 HTML 文件，而是在 style.css 文件中添加了一些类并以这种方式编辑了元素。问题已解决！

标签： html css wordpress google-chrome-devtools

【解决方案1】：

如何找到包含该 HTML 代码的文件？

你不能——不是真的，不是在你的浏览器中，因为你的浏览器看不到单独的“文件”，它只能看到它请求的一个资源的完整 HTML 源代码，它可能由许多不同的文件，加上动态生成 HTML 代码的函数——因此实际的 HTML 代码甚至可能不会在文件中这样编写。

不过，您或许能够识别 HTML 文档的不同部分——并且对 WordPress 的模板结构和输出逻辑有一点了解，您应该能够找出最有可能查看的相关文件是什么.

我建议的另一件事是，您可以为自己准备一个 IDE，该 IDE 允许您搜索整个项目文件夹中的所有文件，而不是在相关或附近的 HTML 元素上查找某些类名、ID 等/它上面。如果你搜索那些，你可能会很幸运。（虽然很多时候这些类/ID 也可能是动态输出的，因此您不会在模板文件中找到它们。）

尤其是对 WP 模板结构知之甚少的情况下，可能需要反复试验才能找到您真正要查找的代码和文件。

【讨论】：

【解决方案2】：

Google 开发者工具不是代码编辑器，因此虽然您可以尝试不同的选项，但我不知道您是否可以保存它，如果可以的话，我不会说这是一个好主意。

Wordpress 使用 PHP，一种 HTML 代码嵌入 PHP 代码的语言。例如，代码<a href='<?php echo(link1);?>'>Home</a> 的 href 属性嵌入了一个 PHP 变量。如果要查找 HTML 代码，请查看 Wordpress 目录中的 PHP 文件，index.php 是着陆页代码。

需要记住的一点是，并不是所有的 HTML 代码都会包含在一个 PHP 文件中，它通常包含在多个文件中，并且大部分内容都在 wp-content 目录中，请留意对于 PHP include 或 require 命令。

【讨论】：

【解决方案3】：

Google 开发者工具只是为了检查，一旦你完成了编辑，你必须复制你的 css 代码并粘贴到你的 css 文件中。

要获取 css 文件，请查看下图。

希望您的问题得到澄清！

【讨论】：

实际上，我的疑问是编辑 HTML 文件而不是 CSS，但最后我通过在 style.css 文件中添加类来解决问题。