如何查找网页元素对应的JS代码（如图）

JavaScript013

如何查找网页元素对应的JS代码（如图）,第1张

如果会调试，可以用打开浏览器的调试功能。以chrome为例，按F12打开调试窗口，切换到Sources选项卡，最右边的Event Listener Breakpoints里勾选Mouse下的mouseover即可，当鼠标移动到图片上时触发mouseover事件，chrome可响应事件设置断点，跟踪js代码查看就可以。

用 jQuery 很容易实现。

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title>JavaScript 测试</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$(document.body).find('a').each(function(i, obj){

var str = $(obj).html()

if(/^test/.test(str)) {

alert(str)

}

})

})

</script>

</head>

<body>

<a>test123456</a>

<a>test343533</a>

</body>

</html>

不用 jQuery 也不难：

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title>JavaScript 测试</title>

<script type="text/javascript">

window.onload = function() {

var atags = document.getElementsByTagName('A')

console.log(atags)

for(var i=0i<atags.lengthi++) {

var str = atags[i].innerHTML

if(/^test/.test(str)) {

alert(str)

}

}

}

</script>

</head>

<body>

<a>test123456</a>

<a>test343533</a>

</body>

</html>

在chrome dev tools下有多种方式来查找自己关注的代码位置。

比如，在Sources下，按Ctrl+F可全局查找。

在Sources下，按ctrl+shift + F，也能全局查找。

再借助断点，可以定位更复杂结构的代码的具体位置。