1-1 Javascript 程式語言是什麼？ | JavaScript 程式語言網頁設計入門

English Title

简体标题

type

Post

status

Published

date

‣

slug

js-intro-1-1-what-is-javascript

summary

我們學習什麼是 Javascript，並打開 Chrome 開發者工具學習面板工具使用方法。

☝️ 教學影片

⌚ 時光戳記

0:00 歡迎訂閱 🔔 按讚 👍 分享 🔥 與留言 💬 0:03 📖 本節目錄 0:08 🤔 JavaScript 是什麼❓ 0:40 🏛 JavaScript 小歷史 1:38 🚀 Chrome 的推出與增長 2:31 👨🏻‍💻 Chrome 的開發者工具

3:06 📝 Element 元素面板 4:18 📱 行動裝置模擬工具 7:24 🎮 Console 控制面板 8:49 📦 Sources 原始碼面板 9:36 📊 Network 網路面板 13:10 🙌 謝謝收看 👀

簡報

課堂講義

Chrome 的開發者工具

Chrome 的開發者工具 DevTools 是什麼？

如何打開 Chrome 的開發者工具？

工具模式：網頁視窗調整和虛擬設備的視窗

延伸閱讀：更多的面板功能

Chrome 的開發者工具 `DevTools` 是什麼？

Chrome 針對開發者設計的工具。

可對於網頁頁面元素 HTML DOM Element 、CSS 進行檢查與修改
顯示網頁輸出 console.log 、執行 Javascript 指令
網路效能測試與頁面結果報告

如何打開 Chrome 的開發者工具？ 📺

使用選單操作

Chrome 視窗選單中，選擇 [更多工具] -> [開發者工具]

Chrome 右鍵選單中，選擇 [檢查 ( Inspect )]

使用快捷鍵

Mac: Cmd + Opt + I

Windows: Ctrl + Shift + I

工具模式

打開 `開發者模式`

你能夠調整開發面板的寬度來讓，也調整頁面寬度width與高度height

打開 `測試機模式`

你能夠讓你的電腦瀏覽器模擬各式各樣的行動裝置

Element 面板 📺

📊 Network 網路面板 📺

延伸閱讀：更多的面板功能

💡

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

💡

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

📖

【參考資料】- 淺談一下關於android碎片化的問題