0

简介：我正在修复一个不是我编码的网站（第一次），我想知道在网站的所有文件中查找函数、类和 ID 关联的最佳方法。

主要问题：主要问题是我浪费了太多时间来尝试发现什么功能做什么以及哪些元素受到影响。例如，我查看具有特定 ID 或类的特定元素，我必须手动搜索所有文件以检查关联。

额外信息：我目前使用 sublimetext，有时还使用 dreamweaver，但如果需要提高效率，我愿意使用其他程序。该网站主要是 HTML、CSS 和 Javascript。

示例： ID="affected" 被 file_1.js 和 file_7.js 修改。或者ID="affected" 使用的是 file_5.js 所针对的 style_1.css。我不确定是否有这样的软件。

更新： 1）我仍然需要测试 Sadi Qevani 的答案，但到目前为止我已经得出以下结论：2）NetBeans 对 javascript 很好，但它需要安装才能执行 sublimetext 或 notepad++ 已经执行的操作。例如，我可以将文件夹和/或文件添加到 sublimetext 按 ctrl+shift+f 并在所有文件中查找任何单词，它将显示文件和该文件中单词附近的一些代码，单击两次，我正在编辑它文件在该单词出现的确切代码行中。这可以用于每种类型的文件！3) Chrome 和 Firefox with firebug 是检查每个元素的 CSS 并在不触及原始文件的情况下测试一些更改的优秀工具。4）我期待一个功能强大的程序，它会像浏览器一样“思考”，以显示浏览器“逐行”打开时发生的一切

4

5 回答 5

2

除了浏览器工具，最好的工具是 NetBeans。安装后，使用您当前网站的目录创建一个项目并导航到该目录中的任何一个文件。打开文件后，右键单击 ID 或类并点击“查找声明”。奇迹般有效。

于 2013-09-20T16:08:48.633 回答
2

对我有帮助的一件事是使用 Chrome 并右键单击一个元素，然后选择“检查元素”。这会打开 Web Inspector，从那里我可以看到有关该元素的更多详细信息。（我也可以使用这些细节来查看它们是如何改变元素的）。

一旦我有了一个特定的类或 id，我就会在代码中搜索对它的引用。在崇高的文本中，我相信 shift + command + f 会调出搜索菜单。从那里您应该能够看到对该类或 id 的引用。

在 Chrome 中研究源映射可能对您有所帮助。如果配置正确，这将允许您在 Chrome 中对代码进行实时更改。这节省了必须搜索元素样式定义位置的步骤。如果您正在处理一组静态文件，这将更加有用。

希望这可以帮助！

于 2013-09-18T23:40:34.107 回答
0

有几个工具可以帮助您找到所需的内容。当结合使用时，我相信你会准备好摇滚。

首先，通过右键单击网页上的任何元素并选择“检查元素”来检查 Google Chrome 的控制台和开发人员工具。

您将看到的第一件事是元素以蓝色突出显示，填充和边距以其他颜色突出显示。您还应该看到一个选项卡式窗格从底部向上滑动。您可以使用 Sources 选项卡查看页面上使用了哪些 javascript 文件，并使用 Console 选项卡查看当前代码引发的任何错误。

调试时要考虑的一件事是使用 console.log() 来测试您对 javascript 代码所做的更改。如果您正在创建一个对象并且需要查看浏览器是否正在访问该部分代码，您可以键入（在函数中，在源文件中）console.log()

然后，当您刷新浏览器时，您将在控制台中看到该对象及其所有属性。如果您什么也没看到，这意味着浏览器没有达到您/他们的功能。这也是查看函数在被调用时会做什么的好方法。

如果你有像 Mac OS 这样的 Linux 或 Unix 机器，你可以使用的另一个工具是 grep（我相信有一个类似的工具叫做 FINDSTR）。启动终端和查看目录中哪些文件包含给定字符串的简单方法，cd 进入目录并输入：grep -r StringToSearch *

这将递归地在目录和任何子目录中搜索您键入的字符串来代替“StringToSearch”。

如果您想从 grep 获取更多信息，请参阅文档以了解如何让 grep 返回更详细的信息，例如字符串出现的特定行 。http: //ibm.co/18zWfaX <-- 有详尽的文档。

于 2013-09-18T23:53:20.777 回答
0

Dreamweaver 和 Sublime 没有提供好的代码嗅探器工具。

我正在使用的以及我建议大家使用的是 webStorm 或 phpStorm。

使用 webStorm，按住 CTRL 键并单击函数，它会将您重定向到函数文件/位置。

希望这有帮助:)

于 2013-09-18T23:37:51.403 回答
0

如果您使用 Mac 或某些 Linux 发行版，您可以使用它grep来搜索所有文件中的任何单词。Grep 的意思是“通用正则表达式解析器”，它会为您在文件中查找表达式。例如：

  $ grep 'random-word' home/mary/*.css

它将在 /home/mary/ 文件夹中的所有 css 文件中查找字符串“random-word”。这是一些文档。

如果您使用 Windows，则可以将 grep 替换为findstr. 有一篇文章解释了如何制作它。

于 2016-08-23T11:44:18.933 回答