JavaScript 程式語言網頁設計入門

正在播放 1/60

1-1 Javascript 程式語言是什麼?

1-1 Chrome 的開發者工具

  • Chrome 的開發者工具 ( DevTools ) 是什麼?
  • 網頁視窗調整和虛擬設備的視窗
  • 更多的面板功能

Chrome 的開發者工具 ( DevTools ) 是什麼?

  • Chrome 針對開發者設計的工具。
    • 可對於網頁頁面元素 ( DOM Element )、CSS 進行檢查與修改
    • 顯示網頁輸出( console.log )、執行 Javascript 指令
    • 網路效能測試與頁面結果報告
  • 如何打開 Chrome 的開發者工具
    • Chrome 視窗選單中,選擇 [更多工具] -> [開發者工具]
    • Chrome 右鍵選單中,選擇 [檢查 ( Inspect )]
    • 快捷鍵
      • Windows: Ctrl + Shift + I
      • Mac: Cmd + Opt + I
  • 打開【開發者模式】
    • 你能夠調整開發面板的寬度來讓也調整頁面寬度與高度
  • 打開【測試機模式】
    • 你能夠讓你的電腦瀏覽器模擬各式各樣的行動裝置

💡 測試機模式不能取代真實設備,但對於工作繁多的前端工程師來說簡直是福音!

 

💡 多數的開發建議先支援 iPhone 與 iPad,因為是單一機種賣最多的設備,解析度應該要最先優化!

 
 

 

📖 【延伸閱讀】- 淺談一下關於android碎片化的問題

簡報

講義

1-1 Chrome 的開發者工具

  • Chrome 的開發者工具 ( DevTools ) 是什麼?
  • 網頁視窗調整和虛擬設備的視窗
  • 更多的面板功能

Chrome 的開發者工具 ( DevTools ) 是什麼?

  • Chrome 針對開發者設計的工具。
    • 可對於網頁頁面元素 ( DOM Element )、CSS 進行檢查與修改
    • 顯示網頁輸出( console.log )、執行 Javascript 指令
    • 網路效能測試與頁面結果報告

  • 如何打開 Chrome 的開發者工具
    • Chrome 視窗選單中,選擇 [更多工具] -> [開發者工具]
    • Chrome 右鍵選單中,選擇 [檢查 ( Inspect )]
    • 快捷鍵
      • Windows: Ctrl + Shift + I
      • Mac: Cmd + Opt + I

  • 打開【開發者模式】
    • 你能夠調整開發面板的寬度來讓也調整頁面寬度與高度
  • 打開【測試機模式】
    • 你能夠讓你的電腦瀏覽器模擬各式各樣的行動裝置

💡 測試機模式不能取代真實設備,但對於工作繁多的前端工程師來說簡直是福音!

 

💡 多數的開發建議先支援 iPhone 與 iPad,因為是單一機種賣最多的設備,解析度應該要最先優化!

 
 

 

📖 【延伸閱讀】- 淺談一下關於android碎片化的問題