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 「軟件老王」，如果覺得還可以的話，關注下唄，后續更新秒知！歡迎討論區、同名公眾號留言交流！