在通過開發者工具去把一些代碼時,有些內容是通過某些觸發來動態添加到頁面上的,並且在操作開發者工具時會被移除,比如下面的代碼
<!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代碼的位置非常困難
但是總比沒有辦法要好。