調試效果：讓頁面上的元素顯示紅色框範圍

效果：

第二種簡單的方法：
我們需要藉助 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>';
    }
})();

然後我們就可以在任意網站上點擊剛纔創建的書籤，內部會判斷是否存在調試的 style。存在的話就刪除，不存在的話就添加，通過這種方式我們就能很方便的通過這個技巧查看任意網頁的佈局了。