如何使用Google Developer Tools在localhost上找到HTML文件？

Question

我在Localhost上使用Wordpress构建网站。我通过使用Google Developer Tools编辑HTML和CSS来学习网页的结构。我想知道我正在编辑哪个文件以及它所在的硬盘位置。

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

Answer 1

  

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

你不能 - 不是真的，不是来自你的浏览器，因为你的浏览器没有看到单独的“文件”，它只能看到它所请求的一个资源的完整HTML源代码，它可能是由许多不同的文件，以及动态生成HTML代码的函数 - 因此实际的HTML代码片段甚至可能不会在文件中写入。

您可能能够识别HTML文档的不同部分 - 并且在对WordPress的模板结构和输出逻辑有一点了解的情况下，您应该能够找出要查找的相关文件最有可能是什么

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

特别是对WP模板结构知之甚少，可能需要一些反复试验才能找到您实际需要的代码和文件。

Answer 2

Google Developer Tools不是代码编辑器，所以虽然您可以尝试不同的选项，但我不知道您可以保存它，如果可以的话，我不会说这是个好主意。

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命令。

Answer 3

Google开发人员工具只是检查一下，完成编辑后，您必须复制您的css代码并粘贴到您的css文件中。

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

希望你的问题得到澄清!!