如何找出隐藏/作用于html元素的内容

Question

我有一个简单的<a>标记，它被某些JS隐藏起来。 （display:none） 我查看了页面源代码，我可以看到它没有隐藏，但是检查员将其显示为display：none（内联样式）

没有结果在JS代码中找到类/ id，以便隔离隐藏<a>的代码部分。

是否有可以帮我调试的工具或固定程序？

Answer 1

Chrome允许您在元素上的属性发生更改时中断代码。

1. 使用F12打开开发人员工具，然后选择“元素”选项卡。找到隐藏的元素。右键单击它，“Break on”，“Attributes Modification”。

2. 刷新页面，保持开发人员工具的打开状态。

如果使用JavaScript隐藏元素，那么您将在此处中断。

否则，它是通过CSS完成的。如果是这种情况，再次使用“元素”选项卡，选择您感兴趣的元素，并查看右侧列中应用的“样式”。 Chrome会根据哪个样式表中的定义显示应用哪些样式。然后找到隐藏元素的那个应该是微不足道的。

  

Answer 2

首先，查看它是否隐藏在内联样式或css类中。

然后，如果是css类，则在所有项目中搜索该类（你应该找到一个将该类添加到元素的javascript函数）。

如果被内联样式属性隐藏，请在项目中查找任何.style.display =属性。

如果你正在使用jquery尝试这样：

// Search by class
.addClass(".hiddenClass

// Search by css
.hide(), or $(".elementSelector").hide()

Answer 3

首先要确保它确实是javascript隐藏了你的元素，因为它很容易成为css。最简单的第一步是检查元素，看看它的默认css是否隐藏它。

二。您的js代码是在一个文件中还是在页面中导入多个js文件？ 如果您有多个js文件，可以试试。

导入1个文件 然后使用javascript来显示你的元素 然后导入其余的文件。

如果隐藏元素的代码位于第一个文件中，那么您的元素将可见（因为您先隐藏它后使其可见） 如果元素不可见，则意味着隐藏发生在后续文件中。 在第二次导入后移动显示元素的javascript代码，依此类推......

最后但并非最不重要的是确保您的代码也不会导入外部css文件。

我建议您使用Chrome开发工具进行任何javascript调试。