後端開發之chrome開發者模式

1. 場景描述

java開發先後端分離模式愈來愈流行，後端人員能夠直接使用swagger進行接口調試（先後端分離之Swagger2），可是調試的時候，須要設置入參，假如該模塊不是軟件老王開發的，接別人的代碼的話，入參定義就會有點麻煩了。

2. 解決方案

使用瀏覽器的開發者模式，獲取先後端交互信息，如今公司默認推薦的瀏覽器是Chrome，前端再也不作其餘瀏覽器的適配，咱們也拿chrome簡單介紹下吧。

軟件老王只從後端開發人員的角度作下介紹，前端大佬請繞行，省的浪費時間。

2.1 chorme下點擊F12鍵，開啓開發者模式

說明： 在圖中2的地方能夠設置顯示格式，上下左右顯示，我這邊使用的是在右邊顯示。

2.2 工具欄說明

工具欄簡要說明：

（1） Elements（元素面板）：能夠修改css等文件，實時顯示效果，以便調試樣式。

（2）Console（控制檯面板）：Console能夠查看網頁運行後提示的消息，錯誤或者警告以及輸出內容等。

（3）Sources（源代碼面板）：在源代碼面板中設置斷點來調試 JavaScript。

（4）Network（網絡面板）：先後端交互面板，包含前端請求及後端返回，從發起網頁頁面請求Request後獲得的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），後端人員主要看這個，先後端交互的信息都在這個裏面。

（5）Performance（性能面板）：記錄和查看網站生命週期內發生的各類事件來提升頁面運行時的性能 。

（6）Memory（內存面板）：分析web應用或者頁面的執行時間以及內存使用狀況 。

（7）Application（應用面板）：記錄網站加載的全部資源信息，包括存儲數據、緩存數據、字體、圖片、腳本、樣式表等。

（8）Security（安全面板）： 後端人員可忽略。

（9）Audits（審覈面板）： 後端人員可忽略。

從上面工具欄介紹中能夠看出，其中網絡面板Network是先後端交互的重點內容，軟件老王重點介紹Network。

2.3 Network

1爲從工具欄選中Network

2爲控件欄，重點是清除、過濾等，本身點擊一下就知道了。

3爲過濾欄，由於有時候交互的信息比較多，能夠在filter框中錄入關鍵字進行過濾，快速定位；

4爲交互信息欄；

5爲概要欄；

其中重點是4，先後端交互信息欄，詳細介紹下。

2.3.1 右鍵能夠選擇更多的展現信息

2.3.2 根據名稱找到對應的交互請求後，單擊

其中：

1爲Headers， 與資源關聯的 HTTP 標頭。
2爲Preview，資源信息預覽。
3爲Response，HTTP 響應數據
4爲Timing，交互響應時間分解。

（1）Headers

根據名字就能夠看出來，Rsponse header存放的返回的頭部信息；Request Header存放的是請求頭信息。

咱們項目中的真實請求：

Post請求，多了個Request Payload，存放請求參數信息（json格式），經過這裏就能夠拿到請求的入參，很重要。

（2）Preview就是返回信息的預覽。

（3）Response 服務器端返回信息。

這裏顯示的是服務器端的返回信息，前端人員根據服務器端返回數據進行渲染，可是渲染部分就不是咱們後臺開發關注的了，咱們須要關注的是：數據返回是否正確。

（4）Timing

這裏通常不用太關注，不過假如服務端返回時間過長的話，就須要定位下問題了。

2.3.3 寫在最後

介紹到這裏，對於後端人員來講，基本夠用了，後端只需保證的是入參正確，返回數據正確就ok，其他的請找前端人員，啦啦啦。。

---

I’m 「軟件老王」，若是以爲還能夠的話，關注下唄，後續更新秒知！歡迎討論區、同名公衆號留言交流！