作者:一樂樂
歡迎大家來一樂樂的博客園
歡迎大家來一樂樂的博客園
1、打開開發者工具：右鍵-->檢查 (快捷鍵 f12)
2、開發者工具介紹：
（1）
： 選擇頁面的dom進行查看
（2）
：設備適配
（3）元素：
① 可以查找到界面對應的dom；
② 通過計算樣式，查看盒模型；
③ 在元素上選擇右鍵，還可以：[當我們看到某個網站的css樣式好好看式，嘿嘿，復制粘貼]
④ ctr+f: 查詢，高亮提示
（4）樣式：可以修改css然后實時查看效果：
-
樣式的:hov 用來固定元素的狀態
-
實時修改css (光標可以在css內隨意移動，可以修改，也可以添加，也可以刪除【去掉方框的√】)
-
樣式的.cls 作用：結合
一起使用，在一群具有相同類選擇器dom元素中，查看具體某個dom元素啦的樣式，然后可以刪除或者添加該dom的類選擇器
（5) 控制台：可以書寫一些語句，查看執行效果
-
控制台常用語句： <span style='color:blue';>console.log(); console.error();
（6）源碼：有時候可能源碼是進行壓縮的，可以點擊下面的 
(可讀模式），js源碼的話，可以進行斷點調試
■ js源碼的斷點調試：（記得按F5進行刷新，不然調試工具的菜單項都是灰色的）
打斷點，然后監視變量
：跳到下一個斷點
: 跳過下一個函數的調用
：進入下一個函數的調用
：跳出當前函數
: 單步調試
■ 當代碼調試進入到官網的代碼（沒有問題的代碼時）: 點擊 調用堆棧 -》右鍵 -》 向忽略列表添加腳本
■ dom 調試：
-
右鍵-》發生中斷條件 -》例如選擇 屬性修改
-
點擊 DOM斷點觀察
（7）網絡【按F5進行刷新】：
1、簡單介紹：
-
對文件類型進行選擇：
-
: 是否監聽網絡請求 -
: 清空監聽的網絡請求 -
網絡節流：模擬在各種網絡下的網速情況
-
更多網絡設置：
□ 設置用戶代理作用：可以模擬用戶使用的瀏覽器，檢測自己的代碼是否可以在特定瀏覽器下正常運行
-
: 當用戶碰到麻煩了，可以讓用戶導出請求的相關信息，然后將該.har 文件發給我們導入查看
❀ 2、實際查看網絡的例子：如何判斷請求是否發送成功以及獲取請求中的數據
一、如何判斷請求是否發送成功
（這里咱以axios為例）
//獲取按鈕
const btns = document.querySelectorAll('button');
btns[1].onclick = function (){
//調用axios方法(返回值是一個Promise對象)，發送AJAx請求
axios({
//請求類型
method: 'POST',
//URL
url:'http://localhost:3000/posts',
//設置請求體(即數據)
data:{
body: 'somoeone like me',
postId: 2
}
}).then(response => {//請求成功后，獲取請求中的數據
console.log(response)
})
};
（1）打開network，先查看請求碼
（2）查看請求行和請求體
- 查看請求行：請求方式、請求參數、請求協議
- 查看請求體：傳輸的數據
■ 在Request Headers 默認看到的僅有請求頭，點擊一下view source，就可以看到請求行和(請求方式、請求路徑、協議下面)請求頭
□ 當請求方式是get時，請求體拼接在請求路徑url上
□ 當請求方式是post時，請求體在Payload
■ 同樣，在Response Headers 默認看到的僅有響應頭，點擊一下view source，就可以看到響應行和(協議、響應狀態碼下面)響應頭
□ 想看響應體，直接點擊Response
二、獲取請求中的數據
（這里咱依然是以axios為例，axios請求成功有一個then方法，調用then方法，打印一下請求的數據）
● 文章來源於：一樂樂的博客園
● 轉載請注明出處