你不知道的JavaScript调试技巧：15个让开发更轻松的书签

最新推荐文章于 2025-05-03 14:09:17 发布

若愚6792

最新推荐文章于 2025-05-03 14:09:17 发布

阅读量689

点赞数 15

分类专栏： Javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42072714/article/details/147673581

版权

1. 页面编辑模式

javascript:document.designMode='on';

说明：将整个页面设置为可编辑模式，可以直接修改网页上的任何文本内容。再次执行可关闭编辑模式。

兼容性：

浏览器	支持情况	备注
Chrome	✓	完全支持
Firefox	✓	完全支持
Safari	✓	完全支持
Edge	✓	完全支持
IE	✓	IE6-10需要大写ON

详细解释：

这个功能通过设置 document.designMode 属性实现
设置为 ‘on’ 时，整个文档变为可编辑状态
设置为 ‘off’ 时，恢复为只读状态
修改后的内容仅在当前会话有效，刷新页面会恢复原状
适用于临时修改网页内容或测试文本样式

2. 元素边框高亮

javascript:(function(){
   const s=document.getElementById('outlineStyle');if(s){
   s.parentNode.removeChild(s);}else{
   const s=document.createElement('style');s.innerText='*{outline:1px solid red!important}';s.id='outlineStyle';document.head.appendChild(s);}})();

说明：为页面所有元素添加红色边框，方便查看元素布局和定位问题。再次执行可移除边框。

兼容性：

浏览器	支持情况	备注
Chrome	✓	完全支持
Firefox	✓	完全支持
Safari	✓	完全支持
Edge	✓	完全支持
IE	✓	需要IE8+

详细解释：

通过动态创建和移除style标签实现
使用CSS的outline属性添加边框
!important确保样式优先级最高
适用于调试布局问题和检查元素嵌套关系
可以快速发现元素重叠或错位问题

3. 解除网页限制

javascript:!function(){
   function t(e){
   e.stopPropagation(),e.stopImmediatePropagation&&e.stopImmediatePropagation()}document.querySelectorAll("*").forEach(e=>{
   "none"===window.getComputedStyle(e,null).getPropertyValue("user-select")&&e.style.setProperty("user-select","text","important")}),["copy","cut","contextmenu","selectstart","mousedown","mouseup","mousemove","keydown","keypress","keyup"].forEach(function(e){
   document.documentElement.addEventListener(e,t,{
   capture:!0})}),alert("解除限制成功啦！")}();