介紹一下主流的瀏覽器的開發者工具(js調試和查看網路請求）

1、打開開發者工具：右鍵–>檢查 (快捷鍵 f12)

2、開發者工具介紹：

（1）： 選擇頁面的dom進行查看

（2）：設備適配

（3）元素：

① 可以查找到介面對應的dom；

② 通過計算樣式，查看盒模型；

③ 在元素上選擇右鍵，還可以：[當我們看到某個網站的css樣式好好看式，嘿嘿，複製粘貼]

④ ctr+f: 查詢，高亮提示


（4）樣式：可以修改css然後實時查看效果：


  • 樣式的:hov 用來固定元素的狀態


  • 實時修改css (游標可以在css內隨意移動，可以修改，也可以添加，也可以刪除【去掉方框的√】)


  • 樣式的.cls 作用：結合image-20220115115415167 一起使用，在一群具有相同類選擇器dom元素中，查看具體某個dom元素啦的樣式，然後可以刪除或者添加該dom的類選擇器


（5) 控制台：可以書寫一些語句，查看執行效果

  • 控制台常用語句： 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:'//localhost:3000/posts',
        //設置請求體(即數據)
        data:{
            title: "money",
            author: "i want"
        }

    }).then(response => {//請求成功後，獲取請求中的數據
        console.log(response)
    })
};
（1）打開network，先查看請求碼

（2）查看請求頭和請求體
  • 查看請求方式、請求參數、請求協議
  • 請求實體（傳輸的數據）

二、獲取請求中的數據

（這裡咱依然是以axios為例，axios請求成功有一個then方法，調用then方法，列印一下請求的數據）

Tags:

VirMach 便宜 VPS

QNews

QNews