WebApp 開發時的 Debug 工具

本篇文章更新時間:2019/02/16
如有資訊過時或語誤之處,歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉!歡迎入群聊聊~


一句話完結主題「一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的哦....呵呵


Share:

作者: Chun

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

發佈留言

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