iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0

簡單回顧一下,第一天講了HTML5常用的幾種tag。二到四天,深入聊了CSS中float原理,實作聖杯和雙飛翼,兩個常見的pc布局。第五天迅速的帶過其他布局、定位、響應式,結束CSS這回合。

接下來我們就要飛入JavaScript的世界,在正式學習JS之前有幾個怪問題需要解決...


JS的飛行跑道 - 執行環境-瀏覽器

JavaScript是無法直接在電腦上執行的,他需要一個家透過瀏覽器。但如果硬是要直接在電腦上執行JS,不透過瀏覽器,也不是不行。可以幫他加裝Node.js,至於甚麼是Node.js,因為暫時用不到,我們就先略過不講它。

//建立JS文件,在HTML新增此行
<head>
    <script src="./檔名.js"></script>  
</head>

點選Live-Server的Go Live,對網頁右鍵,選擇檢查。
將介面從元素切換成Console主控台。就有JS執行結果囉


警告:DevTools 無法載入來源對應: 無法載入chrome-extension://XXX.map 的內容:HTTP 錯誤: 狀態碼 404,net::ERR_UNKNOWN_URL_SCHEME

主控台出現了警告信息,是指JS沒有連上嗎?
不是的不用擔心,只是我們沒有source map的檔案,瀏覽器找不到它,有點緊張,問我們一下而已。

source map警告

source maps的用途是將壓縮的js檔,映射回原始檔案。
消除警告信息方法:

  1. 設定
  2. 取消勾選「啟用JavaScript來源對應(Enable JavaScript source maps)」
  3. 重整網頁
    設定source map警告

要怎麼從手機進入Live Server架設的網頁?

我們也可以在行動裝置上查看網頁的的模樣,需要先將行動裝置與電腦連到同一個wifi。
用內網IP(區域虛擬IP)進入網頁。不知道IP是甚麼也沒事,明天說給你聽。

  1. 找Live Server的index.js檔案
  • 在cmd找檔案位置
    /s:在當前資料夾和子資料夾中搜索。
dir /s "檔案名稱" 
  • 用scoop裝Live Server 檔案可能會在這裡
    C:\Users\linda\scoop\apps\nvm\1.1.7\nodejs\v14.17.6\node_modules
    - 用VSCode裝 Live Server檔案會在這裡
    cmd找live server的(index.js)
    live server更改內網IP檔案位置(index.js)
  1. 將127.0.0.1 改成 內網IP地址
    live_server改port
  2. 用command line 找內網IP地址
ipconfig

區域網IP地址
4. 執行GO LIVE,嘗試手機連線

  • 電腦(server)一樣是連上127.0.0.1
    golive後一樣127.0.0.1
  • 手機/行動裝置 用內網IP:port
    手機連線上liveServer
  1. 不影響可以不要改的Port
  • 在擴充設定的setting.json裡面編輯
  • Port號的範圍從0到65535
"liveServer.settings.port": 想要的port號,
  • 右下角GoLive處從5050到12345
    live_server改port

參考資料

Mac中live-server启动时指定ip|掘金
live-server安装,配置https,ip的修改.


日常幹話
時間:9/11 01:42PM
音樂:旅行家說 毛不易 / 愛在夏天 告五人
飲料:連水都沒有
地點:房間的深藍色皮沙發
狀態:做到屁股痛 肚子很餓 但還是想改完版再吃飯 媽媽很生氣


上一篇
DAY5 速談flex gride布局、定位、響應式
下一篇
DAY7 淺扒網路 - 估計被扒皮的是我不是網路
系列文
前端幼鳥三十天養成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言