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

た入场券 2021-09-24 03:50 469阅读 0赞

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

<!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>

![在这里插入图片描述][20200413161319424.png]  
这段代码的意思就是按住鼠标左键在屏幕上滑动，会产生一个跟随鼠标的红色方框。  
代码可以直接运行，在经过一些尝试后会发现，没法用常规方法获取这个方框的网页源代码。这里介绍一个方法

1.在source界面先找到生成这个方框的js代码，并加上断点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]  
2.鼠标按住左键拖动触发事件，然后`Resume script execution` 把代码全部执行，并取消断点。这时就可以获取到源代码了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]

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

但是总比没有办法要好。

[20200413161319424.png]: /images/20210923/3305efcb855f49fd89623690a5cd09f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]: /images/20210923/9d5b5c7dd9564d04809dcca5957581c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]: /images/20210923/7db437ddaa8c4fd79d1aab629bd9b257.png