[Chrome] 內建檢查元素~ 方便調整版面~ 學CSS必備

有時候畫版面時~ 會發現..
奇怪怎模有東西跑位…
但是又找不到他在哪裡…
又見看原始碼 對大多人來說 太痛苦了~
根本看不董.. 找不到自己要的段落
Chrome 有內建的工具 會顯示 指定地方的 HTML片段
修改完 不用儲存 不用重新整理~ 就可以即時預覽…
所以在學CSS的人~ 不知道調整後會怎樣
每次都要儲存 然後重新整理 有時候還會有快取問題~
真的不好學習~
現在Chrome可以即時顯示 不用儲存 即時改即時顯示

第1步：開啟要修改的網頁

第2步：按下 Ctrl + Shift + C

第3步：出現元素表
上面是網頁 下面是原始碼 右邊是 CSS

第4步：滑鼠在上面移動~ 會出現選取框
找到要修改的地方~ 點下去選取

第5步：下面會顯示出點選的範圍程式碼

第6步：快點兩下可以修改

第7步：按下Enter 後 上面也就即時修改囉

第8步：右邊 CSS也是同樣原理

在〈[Chrome] 內建檢查元素~ 方便調整版面~ 學CSS必備〉中有 3 則留言

  2. daniel

    好工具，謝謝分享！
    請問，修改後的結果可以回存到原來的網頁檔案嗎？
    我找不到方式把修改的結果存起來！
    或者有什麼方法知道我修改的檔案是哪一個？
    感謝你！！！
    Daniel

    Sky37042回覆：
    這個是 Debug 用的~
    所以找到修正的方式後 回到原始碼 在重新key上去 就好了~

留言功能已關閉。