简介:我正在修复一个未经我编码的网站(第一次),我想知道在所有文件中找到函数,类和ID关联的最佳方法。网站。
主要问题:主要问题是我失去了太多时间尝试发现什么功能做什么以及哪些元素受到影响。例如,我查看具有特定ID或类的某个元素,我必须手动搜索所有文件以检查关联。
额外信息:我目前使用sublimetext,有时候使用Dreamweaver,但如果需要更高效,我愿意使用其他程序。该网站主要是HTML,CSS和Javascript。
示例: ID =“受影响”由file_1.js和file_7.js修改。 或 ID =“受影响”正在使用由file_5.js定位的style_1.css。我不确定是否有这样的软件。
更新 1)我仍然需要测试Sadi Qevani的答案,但到目前为止我已经得出以下结论: 2)NetBeans适用于javascript,但需要安装才能执行sublimetext或notepad ++已经完成的操作。例如,我可以添加文件夹和/或文件到sublimetext按ctrl + shift + f并找到所有文件中的任何单词,它将显示文件和该文件中单词附近的一些代码,单击两次,我正在编辑将文件放在单词出现的确切代码行中。这可以用于每种类型的文件! 3)带有firebug的Chrome和Firefox是检查每个元素的CSS并测试一些更改而不触及原始文件的优秀工具。 4)我期待一个强大的程序,它会像浏览器一样“思考”,以便在浏览器“逐行”打开时显示正在发生的一切,因此我知道哪个元素受到了谁的影响......等等也许它甚至不存在:(
答案 0 :(得分:2)
有一件事可以帮助我使用Chrome并右键单击一个元素,然后选择“Inspect Element”。这会打开Web Inspector,从那里我可以看到关于元素的额外细节。 (我也可以使用这些细节来了解它们如何改变元素。)
一旦我有一个特定的类或id,我会搜索代码以获取对它的引用。在崇高的文本中我相信shift + command + f会调出搜索菜单。从那里你应该能够看到对该类或id的引用。
在Chrome中调查源映射可能会有所帮助。如果配置正确,您可以在Chrome中对代码进行实时更改。这节省了必须搜索元素样式定义位置的步骤。如果您正在处理一组静态文件,这将更有用。
希望这有帮助!
答案 1 :(得分:2)
除了浏览器工具之外,最好的工具是NetBeans。安装完成后,使用当前网站的目录创建一个项目,然后导航到该目录中的任何一个文件。打开文件后,右键单击ID或类,然后单击“查找声明”。像魅力一样。
答案 2 :(得分:0)
Dreamweaver和Sublime没有提供良好的Code Sniffer工具。
我正在使用的内容以及我建议大家使用的是webStorm或phpStorm。
使用webStorm,按住CTRL键并单击该功能,它将重定向到功能文件/位置。
希望这有用:)
答案 3 :(得分:0)
有一些工具可以帮助您找到您想要的东西。当组合使用时,我相信你已经准备好摇滚了。
首先,通过右键单击网页上的任何元素并选择“检查元素”来检查Google Chrome的控制台和开发人员工具。
您将看到的第一件事是元素以蓝色突出显示,填充和边距以其他颜色突出显示。您还应该看到从底部向上滑动的选项卡式窗格。您可以使用“源”选项卡查看页面上使用的javascript文件,并使用“控制台”选项卡查看当前代码所引发的任何错误。
调试时要考虑的一件事是使用console.log()来测试您对javascript代码所做的更改。如果您正在创建一个对象并且需要查看浏览器是否正在访问该部分代码,则可以键入(在函数中,在源文件中)console.log()
然后,当您刷新浏览器时,您将在控制台中看到该对象及其所有属性。如果你什么也看不见,那就意味着浏览器没有达到你/他们的功能。这也是查看函数甚至被调用时的功能的好方法。
如果你有像Mac OS这样的Linux或Unix机箱,你可以使用的另一个工具是grep(我相信有一个名为FINDSTR的类似工具)。启动终端以及查看目录中哪些文件包含给定字符串的简单方法,cd进入目录并键入:grep -r StringToSearch *
这将递归搜索目录和任何子目录,查找您键入的字符串,而不是“StringToSearch”。
如果您想从grep获取更多信息,请参阅文档以了解如何获取grep以返回更详细的信息,例如字符串出现的特定行。http://ibm.co/18zWfaX&lt; - 有详尽的文档。< / p>
答案 4 :(得分:0)
如果您使用的是Mac或某些Linux发行版,则可以使用grep
搜索所有文件中的任何单词。 Grep意味着一般正则表达式解析器&#39;并为您找到文件中的表达式。例如:
$ grep 'random-word' home/mary/*.css
它会查找字符串&#39; random-word&#39;在/ home / mary /文件夹中的所有css文件中。这是一些documentation。
如果您使用Windows,则可以替换findstr
的grep。有an article解释如何制作它。