谷歌瀏覽器開發者工具獲取在調試時會消失的代碼

在通過開發者工具去把一些代碼時,有些內容是通過某些觸發來動態添加到頁面上的,並且在操作開發者工具時會被移除,比如下面的代碼

<!DOCTYPE html>
<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 = '<div><div style="position: absolute;width: 50px;height: 50px;background-color: red;top: ' + y + 'px;left: ' + x + 'px;">111</div></div>';
			jQuery("body").html(html);
			
		}).on("mousedown", function(e){
			window.flag = true;
		}).on("mouseup", function(e){
			window.flag = false;
			jQuery("body").html("");
		});
		
	</script>
</html>

在這裏插入圖片描述
這段代碼的意思就是按住鼠標左鍵在屏幕上滑動,會產生一個跟隨鼠標的紅色方框。
代碼可以直接運行,在經過一些嘗試後會發現,沒法用常規方法獲取這個方框的網頁源代碼。這裏介紹一個方法

1.在source界面先找到生成這個方框的js代碼,並加上斷點
在這裏插入圖片描述
2.鼠標按住左鍵拖動觸發事件,然後Resume script execution 把代碼全部執行,並取消斷點。這時就可以獲取到源代碼了
在這裏插入圖片描述

缺點:
本方法只適合以這種方式對代碼進行隱藏(remove)
很多時候找到對應的js代碼的位置非常困難

但是總比沒有辦法要好。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章