谷歌浏览器开发者工具获取在调试时会消失的代码

在通过开发者工具去把一些代码时,有些内容是通过某些触发来动态添加到页面上的,并且在操作开发者工具时会被移除,比如下面的代码


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js">script>
	head>
	<body>
		
	body>
	<script type="text/javascript">
		window.flag = false;
		jQuery(window.document).on("mousemove", function(e){
			if(!flag)return;
			
			var x = e.pageX;
			var y = e.pageY;
			
			var html = '
+ y + 'px;left: ' + x + 'px;">111
'
; jQuery("body").html(html); }).on("mousedown", function(e){ window.flag = true; }).on("mouseup", function(e){ window.flag = false; jQuery("body").html(""); });
script> html>

谷歌浏览器开发者工具获取在调试时会消失的代码_第1张图片
这段代码的意思就是按住鼠标左键在屏幕上滑动,会产生一个跟随鼠标的红色方框。
代码可以直接运行,在经过一些尝试后会发现,没法用常规方法获取这个方框的网页源代码。这里介绍一个方法

1.在source界面先找到生成这个方框的js代码,并加上断点
谷歌浏览器开发者工具获取在调试时会消失的代码_第2张图片
2.鼠标按住左键拖动触发事件,然后Resume script execution 把代码全部执行,并取消断点。这时就可以获取到源代码了
谷歌浏览器开发者工具获取在调试时会消失的代码_第3张图片

缺点:
本方法只适合以这种方式对代码进行隐藏(remove)
很多时候找到对应的js代码的位置非常困难

但是总比没有办法要好。

你可能感兴趣的:(js)