台灣的Web工程師

查看傳送與接收資料

有時候我們操作網頁時，會想要知道資料到底有沒有傳送到後端，或是後端傳送回來的資料是否正確，也提供了網路封包查看的功能，就是在Network的頁籤。

範例操作

1. 開啟Chrome視窗並連到Google頁面，並透過滑鼠右鍵的「檢查」開啟Chrome的下方視窗。

這是筆者在工作上遇到的一種狀況，情境是這樣子的：

Javascript，HTML中三大元素的最後一個，也是唯一需要寫程式的一個，如果沒有Javascript處理程式邏輯的話，網頁就無法跟使用者有互動效果。

Javascript的初學者，常常都會花一點時間，上網找看看有沒有Javascript專用的IDE開發工具，例如寫JAVA可以的Eclipse、NetBean等工具，寫.NET的Visual Studio工具一樣。

CSS，一個控制網頁上HTML的樣式，CSS在設計網頁是非常重要的，因為HTML中的原素排列方式是從上到下的，但是我們現在網頁看起來排版都很漂亮，這是因為CSS的幫忙；CSS宣告這個HTML原素要被排在什麼地方，再由瀏灠器來達成要求，組出現在我們看到的網頁。

CSS因應時代的進步，CSS也進步到CSS3，其實說CSS3，可能有人不清楚，不過要是說要響應式網頁（Responsive），大家應該比較清楚，因為它可以說是近來網頁設計的主流，它可以配合各種畫面的大小，自動調整成適合的版面，更重要的是，它能讓網頁的設計者，只需要寫一次程式，就可以配合電腦、平版、手機等各式不同的畫面。而響應式網頁，主要就是建立在CSS3之上。

CSS是如此的重要，所以如果能即時在網頁上調整，那不知道可以節省多少的時間，尤其是遇到不確定的語法時，更是方便，本篇會大幅介紹Chrome如何即時處理CSS的調整。