JoshS的部落格

首先壓F12 >> 右上方有個資料夾健(Ctrl + P) 將工具釘於下方 

>> 此時選左方選單中的蟲圖 就可進行 前端的"JavaScript"的debug

>> 而按下左方選單中的類似搜訊圖>>便可進行網路間與serve之間傳送的資訊

Ex:(進行網路間與serve之間傳送的資訊)

假設我要看"搜尋"這按鈕的serve間相關資訊

第一先把工具列上方有個X圖清掉數據清單

然後在壓"搜尋"鈕後，便可看到數據清單中的傳送成功與否

若成功可以點選清單選項進入看內容狀況

，而值得一題的是"要求本文"跟"回應本文"這兩個選項

要求本文 : 是傳出去至serve的資料   ex: {'unitid':'JAY00'}

回應本文: serve傳回來的資料          ex:  {"d":"{\"total\":\"0\",\"data\":[]}"}

下面圖例:

1.  點選左側紅圈 可以看與server間的傳送資訊，下面特別圈起兩百就是網路傳輸代號，200是傳輸OK

2 接著我們可以點選我們要看的哪個網路傳輸排成，其中下方"回應本文" 可看出 server回傳了甚麼

   黃色圈圈就代表執行目前這網路的狀態(點選三角型執行後通常會再讓網頁重跑一次)

   綠色圈圈左邊是清空capture 就是更新一下你所更新的程式在跑才會正確，右邊的X是把下方的資訊清掉

3 接著是debug部分   ，點選左邊紅圈小蟲圖 ，若此頁的js包很多層，我們可以到下面左方的file夾內

去找出我們要的程式內容進行觀看

三角形可方便我們直接到中段點，最值得一提的事，我們可以到最下方主控台(沒圈起來)的地方輸入去找我們要

尋找的變數，或透過最下方紅圈處去新增"新監觀看點" 就可以到右方查看回傳資訊，是否轉成Json貨function貨string等..

不用一直用alert去查有哪些屬性