实用网页UI调试技巧

网页调试实用技巧

借助 Chrome 的书签功能。

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>';
	}
})();

或者手动添加css代码

body * {
  outline: 1px solid red;
}

效果图如下