UI调试技巧

206 阅读1分钟

身为前端,UI调试每次使用chorme的控制台总感觉很麻烦,最近正好看到网上有大神提供的两种方法,觉得不错,写下来希望更多的人看到。

  1. 在控制台输入

    var css = document.createElement('style')
    css.innerHTML = `* { background-color: rgba(255,0,0,.2); }
    * * { background-color: rgba(0,255,0,.2); }
    * * * { background-color: rgba(0,0,255,.2); }
    * * * * { background-color: rgba(255,0,255,.2); }
    * * * * * { background-color: rgba(0,255,255,.2); }
    * * * * * * { background-color: rgba(255,255,0,.2); }
    * * * * * * * { background-color: rgba(255,0,0,.2); }
    * * * * * * * * { background-color: rgba(0,255,0,.2); }
    * * * * * * * * * { background-color: rgba(0,0,255,.2); }
    * * * * * * * * * * { background-color: rgba(0,0,255,.2); }
    `
    document.querySelector('head').appendChild(css)
    

    效果:

  1. 通过书签实现

    方法:

    1. 打开书签管理页
    2. 右上角三个点「添加新书签」
    3. 名称随意,粘贴以下代码到网址中
    javascript: (function() {
    	var elements = document.body.getElementsByTagName('*');
    	var items = [];
    	for (var i = 0; i < elements.length; i++) {
    		if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -1) {
    			items.push(elements[i]);
    		}
    	}
    	if (items.length > 0) {
    		for (var i = 0; i < items.length; i++) {
    			items[i].innerHTML = '';
    		}
    	} else {
    		document.body.innerHTML +=
    			'<style>html * { outline: 1px solid red }</style>';
    	}
    })();
    

    使用时只需要在当前页面点击这个书签即可。效果:

今天又是学到的一天。