WebApp 開發時的 Debug 工具

一句話完結主題「一Chrome在手,希望無窮」!

Chrome瀏覽器在前端的有給開發者一個好東西,用「F12」可以呼叫出來

長這樣

截圖

Elements 觀察DOM的狀態

Network 觀察網路活動,與請求狀態

Resources 觀察網頁儲存的活動狀態

Console JavaScript在DOM裡執行時模擬與Debug的地方

想了解網站通訊部分就要多摸一下 Network 這塊,寫 CSS 動態調整就去 Elements 裡改改看,寫 JavaScript 一定要去 Console 那邊嘗試。

以上僅列常用,其他就很少用到了

BTW, 就算是寫 NodeJS 時,有時候想測試一些簡單的語法也可以在 Console 裡測! 很方便的

有提到前端,就有後端

網站有設計好的話,後端可能是寫成API的方式,對應API要測還要寫UI實在太辛苦~

所以強烈推薦 Chrome 應用程式 「Postman

畫面截圖

外掛版的也有,就是目前測到好像有一些跨站的問題,就沒推薦了

使用介面也一目了然!

網址輸入後,HTTP協定方法選一下,輸入的內容選好後填好就是送出測試拉~

這邊用甚麼方法或是網址都沒有一定,看需求看規格看設計

一下別人寫的也很OK的哦....呵呵

Facebook 外掛功能


Share:

作者: Chun

資訊愛好人士。主張「人人都該為了偷懶而進步」。期許自己成為斜槓到變進度條 100% 的年輕人。[//////////____30%_________]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *