chrome開發工具指南(三)

2022-05-18 16:03:37 字數 744 閱讀 9176

security 面板

要檢視頁面的整體安全性,請開啟 devtools,然後轉至 security 面板。

您首先會看到 security overview。security overview 會一目了然地告訴您頁面是否安全。 安全頁面會通過訊息this page is secure (valid https).指示

點選view certificate檢視主源的伺服器證書。

非安全頁面會通過訊息this page is not secure.指示

security 面板可以區分兩種非安全頁面。 如果請求的頁面通過 http 提供,則主源會被標記為不安全。

如果請求的頁面通過 https 檢索,但頁面會繼續使用 http 檢索其他源的內容,然後頁面仍然會被標記為不安全。這稱為混合內容頁面。 混合內容頁面僅受部分保護,因為 http 內容可以被嗅探器獲取到且易受到中間人攻擊。

點選view request in network panel開啟 network 面板的過濾檢視,然後檢視具體是哪些請求通過 http 提供。 這將顯示來自所有源的所有未受保護的請求。

使用左側面板可以檢查各個安全或非安全源。

點選安全源檢視該源的連線和證書詳情。

如果您點選非安全源,security 面板會提供 network 面板過濾檢視的鏈結。

點選鏈結可以檢視具體是源的哪些請求通過 http 提供。

chrome開發工具指南(十四)

您的任務不只侷限於確保 在 chrome 和 android 上出色執行。即使 device mode 可以模擬 iphone 等多種其他裝置,我們仍鼓勵您檢視其他瀏覽器模擬解決方案。瀏覽器模擬器非常適合於測試 的自適應能力,但它們無法模擬 api 差異 css 支援,以及您可以在移動裝置瀏覽器中看...

chrome開發工具指南(九)

如果您使用本地儲存儲存鍵值對 kvp 則可以從local storage窗格中檢查 修改和刪除這些 kvp。使用indexeddb窗格可以檢查 修改和刪除 indexeddb 資料。展開indexeddb窗格時,indexeddb 下的第乙個級別是資料庫。如果存在多個活動的資料庫,您會看到多個條目。...

chrome開發工具指南之綜述

第 一 快速定位檔案或者某乙個單詞 ctrl o ctrl f ctrl shift o ctrl shift f 第二 快速切換到某一行 ctrl g ctrl l 第三 控制台選擇器 返回選擇器的第乙個元素,相當於document.queryselector 返回所有匹配的元素,相當於docue...