DAY6 JS跑在瀏覽器上的怪問題們

2021 iThome 鐵人賽

DAY 6

Modern Web

前端幼鳥三十天養成記系列第 6 篇

13th鐵人賽 live-server改ip devtools 無法載入來源對應手機打開live -server網站

ChihBird稚鳥

2021-09-11 13:47:27

5858 瀏覽

分享至

簡單回顧一下，第一天講了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檔，映射回原始檔案。
消除警告信息方法：

設定
取消勾選「啟用JavaScript來源對應(Enable JavaScript source maps)」
重整網頁

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

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

找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檔案會在這裡

將127.0.0.1 改成內網IP地址
用command line 找內網IP地址

ipconfig

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

電腦(server)一樣是連上127.0.0.1
手機/行動裝置用內網IP:port

不影響可以不要改的Port

在擴充設定的setting.json裡面編輯
Port號的範圍從0到65535

"liveServer.settings.port": 想要的port號,

右下角GoLive處從5050到12345

參考資料

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

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

DAY5 速談flex gride布局、定位、響應式

DAY7 淺扒網路 - 估計被扒皮的是我不是網路

系列文

前端幼鳥三十天養成記共 30 篇

RSS系列文訂閱系列文

6 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22202 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

前端幼鳥三十天養成記系列 第 6 篇