首頁>>技術前沿>>B/S,C/S軟件系統開發對于前端開發者來說，ChromeDevTools絕對是不可或缺的調試工具，我們常用的調試方法包含一些console等，而ChromeDevTools 其實很強大，下面來聊聊一些你可能不知道的debug 方法。
Scroll Into View 滾動如視圖內
在Elements標簽中，查看頁面元素的時候，如果當前這個元素不在視圖內，可以通過這個方法讓這個元素快速滾入視圖中。
操作：
在Elements 標簽頁中選擇一個不在視圖內的元素
右擊，選擇Scrollintoview
Copy As Fetch 復制為 Fetch
在Network 標簽下的所有的請求，都可以復制為一個完整的Fetch 請求的代碼。
操作：
在Network 標簽頁中，選中一個請求
右擊，選擇Copy –>Copyasfetch
阻塞請求
在Network 標簽頁下，選中一個請求，右擊該請求，選擇Blockrequest domain 或Blockrequest URL，可以分別阻塞該請求所在domain 下的所有請求 和 該請求。
手動給元素添加一個點擊事件監聽
在debug 的時候，有時候需要在元素的點擊事件監聽函數中，將該點擊事件對象打印出來。有個更方便的方式，是可以直接在Elements 標簽頁為頁面元素添加事件監聽事件。
操作：
在Elements 標簽頁中選中一個頁面元素（選中之后，默認可以通過$0 變量獲取到該元素 ）
在Console 標簽頁中，調用函數monitorEvents，輸入兩個參數，第一個是當前元素（$0），第二個是事件名（click）
按Enter后，當被選中的元素觸發了點擊事件之后，Console 標簽頁會將該點擊事件對象打印出來
拖動頁面元素
在Elements 標簽頁，你可以拖動任何HTML 元素，改變它在頁面中的位置。
截屏
在新版本的Chrome 中，提供了一個截圖的API，你可以將整個頁面截圖或者截取部分頁面元素，且截取的圖片尺寸跟瀏覽器當前視圖中要截取的內容所占尺寸一致。截圖輸出的是png 格式的圖片，會自動通過瀏覽器下載到默認的目錄下?，F在有三種截取的方式：截取整個頁面、部分元素 或當前視圖。
截取頁面部分元素的操作：
CMD + SHIFT + P ( windows 中用 CTRL + SHIFT + P ) 打開命令菜單
在Elements 標簽頁，選中要截取的頁面元素
選擇 Capture node screenshot
緩存上一步操作的結果
在ChromeDevTools 上運行JavaScript 表達式的時候，可以使用$_ 來獲取到上一步操作的返回值
Overrides 重寫
在ChromeDevTools上調試css 或JavaScript時，修改的屬性值在重新刷新頁面時，所有的修改都會被重置。如果你想把修改的值保存下來，刷新頁面的時候不會被重置，那就看看下面這個特性（Overrides）吧。Overrides 默認是關閉的，需要手動開啟，開啟的步驟如下。
開啟的操作：
打開ChromeDevTools 的Sources 標簽頁
選擇Overrides 子標簽
選擇+Selectfolderforoverrides，來為Overrides 設置一個保存重寫屬性的目錄
版權聲明:
1、弈聰軟件網站內容中凡注明“來源：XXX（非陜西弈聰網站）”的作品，轉載自其它媒體，轉載目的在于傳遞更多信息，其中涉及的網站建設，網站優化，APP開發，微信小程序開發，大數據平臺開發，區塊鏈技術開發等軟件開發技術細節并不代表本站贊同支持其觀點，并不對其真實性負責。對于署名“陜西弈聰”的作品系本站版權所有，任何人轉載請署名來源，否則陜西弈聰將追究其相關法律責任。
2、本站內容中未聲明為“原創”的內容可能源自其它網站，但并不代表本站支持其觀點，對此帶來的法律糾紛及其它責任與我方無關。如果此內容侵犯了您的權益，請聯系我方進行刪除。
企業動態
