前端開發必備之Chrome開發者工具（上篇）

来源:https://www.cnblogs.com/laixiangran/archive/2018/04/10/8777579.html
-Advertisement-
Play Games

本文介紹的 Chrome 開發者工具基於 Chrome 65版本，如果你的 Chrome 開發者工具沒有下文提到的那些內容，請檢查下 Chrome 的版本 簡介 Chrome 開發者工具是一套內置於 Google Chrome 中的Web開發和調試工具，可用來對網站進行迭代、調試和分析 打開 Chr ...


本文介紹的 Chrome 開發者工具基於 Chrome 65版本，如果你的 Chrome 開發者工具沒有下文提到的那些內容，請檢查下 Chrome 的版本

簡介

Chrome 開發者工具是一套內置於 Google Chrome 中的Web開發和調試工具，可用來對網站進行迭代、調試和分析

打開 Chrome 開發者工具的方式有：

Chrome 開發者工具主要包含以下10個部分：

  1. 設備模式（device toolbar）
  2. 元素麵板（Elements）
  3. 控制臺面板（Console）
  4. 源代碼面板（Sources）
  5. 網路面板（Network）
  6. 性能面板（Performance）
  7. 記憶體面板（Memory）
  8. 應用面板（Application）
  9. 安全面板（Security）
  10. 主菜單（Customize and control DevTools）

設備模式（device toolbar）

使用 Chrome DevTools 的 Device Mode 打造移動設備優先的完全自適應式網站

該模式不可替代真實設備測試

切換 Device Mode 按鈕可以打開或關閉 Device Mode

選擇設備

通過該視圖控制項，你可以設定下麵兩種模式：

  1. 自適應。 使視口可以通過任意一側的大手柄隨意調整大小
  2. 特定設備。 將視口鎖定為特定設備確切的視口大小，並模擬特定設備特性

媒體查詢

媒體查詢是自適應網頁設計的基本部分。要查看媒體查詢檢查器，請在三圓點菜單中點擊 Show Media queries。DevTools會在樣式表中檢測媒體查詢，併在頂端標尺中將它們顯示為彩色條形

用彩色標記的媒體查詢示例如下：

快速預覽媒體查詢

點擊媒體查詢條形，調整視口大小和預覽適合目標屏幕大小的樣式

查看關聯的 CSS

右鍵點擊某個條形，查看媒體查詢在 CSS 中何處定義並跳到源代碼中的定義

元素麵板（Elements）

使用元素麵板可以自由的操作DOM和CSS來迭代佈局和設計頁面

編輯樣式

使用 Styles 窗格可以修改與元素關聯的 CSS 樣式

添加、啟用和停用 CSS 類

點擊 .cls 按鈕可以查看與當前選定元素關聯的所有 CSS 類。 從這裡，您可以執行以下操作：

  • 啟用或停用當前與元素關聯的類
  • 向元素添加新類

添加或移除動態樣式（偽類）

您可以在元素上手動設置動態偽類選擇器（例如 :active、:focus、:hover 和 :visited）

可以通過兩種方式在元素上設置動態狀態：

  • 在 Elements 面板內右鍵點擊某個元素，然後從菜單中選擇目標偽類，將其啟用或停用

  • 在 Elements 面板中選擇元素，然後在 Styles 窗格中點擊 :hov 按鈕，使用覆選框啟用或停用當前選定元素的選擇器

快速向樣式規則添加背景色或顏色

Styles 窗格提供了一個用於向樣式規則快速添加 text-shadow、box-shadow、color 和 background-color 聲明的快捷方式

樣式規則的右下角有一個由三個點組成的圖標。您需要將滑鼠懸停到樣式規則上才能看到這個圖標

將滑鼠懸停到此圖標上可以調出添加 text-shadow、box-shadow、color 和 background-color 聲明的快捷方式。

使用 Color Picker 修改顏色

要打開 Color Picker，請在 Styles 窗格中查找一個定義顏色的 CSS 聲明（例如 color: blue）。 聲明值的左側有一個帶顏色的小正方形。 正方形的顏色與聲明值匹配。 點擊小正方形可以打開 Color Picker

您可以通過多種方式與 Color Picker 交互：

  1. 取色器。 通過滑鼠懸停到某種顏色上去獲取顏色值。
  2. 當前顏色。 當前值的可視表示。
  3. 當前值。 當前顏色的十六進位、RGBA 或 HSL 表示。
  4. 調色板。 當前生成的幾組顏色。
  5. 著色和陰影選擇器。
  6. 色調選擇器。
  7. 不透明度選擇器。
  8. 顏色值選擇器。 點擊可以在 RGBA、HSL 和十六進位之間切換。
  9. 調色板選擇器。 點擊可以選擇不同的模板。

編輯 DOM

Elements 面板中的 DOM 樹視圖可以顯示當前網頁的 DOM 結構。通過 DOM 更新實時修改頁面的內容和結構

隱藏 DOM

兩種方式：

  • 右鍵選擇某個元素，然後選擇 Hide element
  • 選中某個元素，然後使用快捷鍵 H

設置 DOM 斷點

設置 DOM 斷點以調試複雜的 JavaScript 應用。例如，如果您的 JavaScript 正在更改 DOM 元素的樣式，請將 DOM 斷點設置為在元素屬性修改時觸發。在發生以下一種 DOM 更改時觸發斷點：子樹更改、屬性更改、節點移除

子樹修改

設置子樹修改斷點：右鍵選擇某個元素，然後選擇 Break on --> subtree modifications

添加、移除或移動子元素時將觸發子樹修改斷點。例如，如果您在 main-content 元素上設置子樹修改，以下代碼將觸發斷點：

var element = document.getElementById('main-content');
//modify the element's subtree.
var mySpan = document.createElement('span');
element.appendChild( mySpan );
屬性修改

設置屬性修改斷點：右鍵選擇某個元素，然後選擇 Break on --> attribute modifications

動態更改元素的屬性 (class, id, name) 時將發生屬性修改：

var element = document.getElementById('main-content');
// class attribute of element has been modified.
element.className = 'active';
節點移除

設置節點移除斷點：右鍵選擇某個元素，然後選擇 Break on --> node removal

從 DOM 中移除有問題的節點時將觸發節點移除修改：

document.getElementById('main-content').remove();

查看元素事件偵聽器

在 Event Listeners 窗格中查看與 DOM 節點關聯的 JavaScript 事件偵聽器

啟用 Ancestors 覆選框時查看祖先實體事件偵聽器，即除了當前選定節點的事件偵聽器外，還會顯示其祖先實體的事件偵聽器

啟用 Framework listeners 覆選框時查看框架偵聽器，DevTools 會自動解析事件代碼的框架或內容庫封裝部分，然後告訴您實際將事件綁定到代碼中的位置

控制臺面板（Console）

在開發期間，可以使用控制臺面板記錄診斷信息，或者使用它作為 shell 在頁面上與 JavaScript 交互

消息堆疊

如果一條消息連續重覆，而不是在新行上輸出每一個消息實例，控制台將“堆疊”消息併在左側外邊距顯示一個數字。此數字表示該消息已重覆的次數

如果您傾向於為每一個日誌使用一個獨特的行條目，請在 DevTools 設置中啟用 Show timestamps

由於每一條消息的時間戳均不同，因此，每一條消息都將顯示在各自的行上

選擇執行環境

以下屏幕截圖中以藍色突出顯示的下拉菜單稱為 Execution Context Selector

通常，您會看到此環境設置為 top（頁面的頂部框架）。

其他框架和擴展程式在其自身的環境中運行。要使用這些其他環境，您需要從下拉菜單中選中它們。 例如，如果您要查看 <iframe> 元素的日誌輸出，並修改該環境中存在的某個變數，您需要從 Execution Context Selector 下拉菜單中選中該元素。

控制台預設設置為 top 環境，除非您通過檢查其他環境中的某個元素來訪問 DevTools。 例如，如果您檢查 <iframe> 中的一個 <p> 元素，那麼，DevTools 將 Execution Context Selector 設置為該 <iframe> 的環境。

當您在 top 以外的環境中操作時，DevTools 將 Execution Context Selector 突出顯示為紅色，如下麵的屏幕截圖中所示。 這是因為開發者很少需要在 top 以外的任意環境中操作。 輸入一個變數，期待返回一個值，只是為了查看該變數是否為 undefined（因為該變數是在不同環境中定義的），這會非常令人困惑

源代碼面板（Sources）

在源代碼面板中設置斷點來調試 JavaScript ，或者通過Workspaces（工作區）連接本地文件來使用開發者工具的實時編輯器

格式化混淆代碼

在某些情況下，我們需要對混淆的代碼做一定的調試，但這是我們看到的代碼是亂成一團，毫無格式可言：

那我們可以點擊下方的格式化按鈕對代碼進行格式化：

斷點調試

代碼行斷點

當我們知道需要調試的代碼的確切位置的時候，使用代碼行斷點

DevTools 設置代碼行斷點：

  1. 點擊 Sources 選項卡。
  2. 打開包含您想要調試的代碼行的文件。
  3. 找到該代碼行。
  4. 點擊左邊的行號，這樣一個藍色圖標就顯示在行號上，表明該代碼行設置好斷點了。

當然你也可以在代碼中使用 debugger 來設置代碼行斷點，效果和在 DevTools 中設置是一樣的：

console.log('a');
console.log('b');
debugger;
console.log('c');

條件代碼行斷點

當我們知道需要調試的代碼的確切位置且在滿足條件下才調試的時候，使用條件代碼行斷點

設置條件的代碼行斷點：

  1. 點擊 Sources 選項卡。
  2. 打開包含您想要調試的代碼行的文件。
  3. 找到該代碼行。
  4. 右鍵點擊左邊的行號。
  5. 選擇添加條件斷點。代碼行下麵會顯示一個對話框。
  6. 在對話框中輸入你的條件。
  7. 按Enter激活斷點。行號上出現橙色圖標。

DOM更改斷點

當您想要更改DOM節點或其子節點的代碼時，使用DOM更改斷點

設置DOM更改斷點：

  1. 切換到 Elements 面板。
  2. 找到您想設置斷點的元素並右鍵單擊該元素。
  3. 將滑鼠懸停在 Break on 上，然後選擇 subtree modifications，attribute modifications或node removal。

XHR斷點

當XHR的請求URL包含指定字元串時，如果要中斷，使用XHR斷點

設置XHR斷點：

  1. 點擊 Sources 選項卡。
  2. 展開 XHR Breakpoints 窗格。
  3. 點擊添加斷點。
  4. 輸入你想要打斷的字元串。當此字元串出現在XHR的請求URL中的任何位置時，DevTools會暫停。
  5. 按Enter確認。

事件監聽器斷點

當想要暫停事件偵聽器代碼時，使用事件偵聽器斷點

設置事件監聽器斷點：

  1. 點擊 Sources 選項卡。
  2. 展開 “Event Listener Breakpoints” 窗格。DevTools顯示事件類別的列表，例如動畫。
  3. 選中這些類別中的一個可以暫停該類別的任何事件，或者展開類別並檢查特定事件。

異常斷點

當您想暫停引發捕獲或未捕獲異常的代碼行時，使用異常斷點

設置異常斷點：

  1. 點擊 Sources 選項卡。
  2. 點擊暫停，啟用後變成藍色。
  3. （可選）如果除了未捕獲的異常外，還想暫停捕獲的異常，請選中 “Pause on caught exceptions” 覆選框。

功能斷點

調用 debug(functionName) 來給函數 functionName 進行斷點調試

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

未完待續...

參考資料

https://developers.google.com/web/tools/chrome-devtools/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • babel安裝
    https://blog.csdn.net/singsingasong/article/details/79886566 ...
  • call與apply
    眾所周知，每個函數都包含兩個非繼承而來的方法：apply()與call() 方法，他們都可以接收參數，他們的作用都是一樣的，都是在特定的作用域裡面調用函數，相當於設置函數體內的this對象的值，這也是他們的強大之處，就在於可以擴充函數運行的作用域，下麵 就用代碼來說明他們的作用，來看兩個demo: ...
  • js與ios橋接使用WebViewJavascriptBridge簡單理解
    https://github.com/marcuswestin/WebViewJavascriptBridge github地址如上 工作中用到了這個橋接，出現了很多問題， 首先，初始化了這個函數之後，然後調用這個函數，調用ios端定義的handler或者js 註冊自己的handler， 但是好像不 ...
  • 從零搭建 webpack3 環境 #1 - 安裝使用
    目錄： （1）什麼是webpack （2）webpack核心概念 （3）環境安裝 （4）開始使用webpack 1、什麼是webpack 官網的一幅圖對webpack的解釋，從圖中可以看出，webpack 可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到 JavaScript模塊以及其它的 ...
  • 前端問題整理
    先放一枚花生日記 邀請碼 : SDHS420 有做推廣聯盟賺錢的朋友可以瞭解下花生日記 $HTML， HTTP，web綜合問題 1、前端需要註意哪些SEO 合理的title、description、keywords：搜索對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而 ...
  • ES6要點總結（4）-箭頭函數=>
    axios.get("/****/**.msp").then(res=> { this.initChart(); }) axios.get("/****/**.msp").then(res=> { this.initChart(); }) ...
  • 【javascript】定時器組件
    參數說明 opts.id(String): 定時器id； opts.interval(Number, 單位s, 預設1): 每次輪詢時間，比如 1； opts.callback: 回調函數； opts.begin(Number): 起始值； opts.end(Number): 終點值； opts.s ...
  • 前端jq設置下拉框的，單選框，覆選框的帖子
    $(function(){ var sex=$("#sex").val(); var marriageStatus=$("#marriageStatus").val(); var education=$("#education").val(); if(!isnull(sex)){ $("input: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類