Chrome自帶的開發者工具還能這麼用!

2022-08-25 17:03:33 字數 513 閱讀 7598

to be continued

(1)、宣告位於位於html文件中的第一行,處於 標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。doctype不存在或格式不正確會導致文件以相容模式呈現。

(2)、標準模式的排版 和js運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中,頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

閉包:函式能訪問外部函式的變數

function getqueryobject(url) {

url = url == null ? window.location.href : url;

var search = url.substring(url.lastindexof('?') + 1);

return search;

getqueryobject('');

垂直居中

Chrome開發者工具使用

elements 元素 允許我們從瀏覽器的角度看頁面,也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外,還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊,並且提供了shell用來和文件...

巧用chrome開發者工具

說明 截圖中的chrome版本為52,不同版本可能略有區別。開發時消除靜態資源快取不能立刻更新的困擾,勾選disable cache即可 切換顏色顯示格式 修改預設顏色顯示格式,在settings 控制台按f1 preferences elements color format 快速選中dom節點,...

Chrome開發者工具面板

network面板可以記錄頁面上的網路請求的詳情資訊,從發起網頁頁面請求request後分析http請求後得到的各個請求資源資訊 包括狀態 資源型別 大小 所用時間 request和response等 可以根據這個進行網路效能優化。我把google官方 上介紹network面板的圖貼到這裡,該面板主...