ASP.NET Core 專案手機端預覽：局域網存取與除錯技巧

問題場景

VS2013 ASP.NET 專案在 PC 上使用 https://localhost:50697/index 正常運行，手機同網段輸入 https://110.64.91.247:50697/index 回傳 HTTP 400 錯誤。

核心原因

• Kestrel/IIS Express 綁定限制：預設僅綁定 localhost，拒絕外部 IP 存取
• 防火牆阻擋：Windows 防火牆未開放該埠對外連線
• Host Header 驗證：ASP.NET Core 預設檢查 Host 標頭，非預期主機名會拒絕

解決步驟

方法一：修改 launchSettings.json（推薦）

"profiles": {
  "IIS Express": {
    "commandName": "IISExpress",
    "launchBrowser": true,
    "launchUrl": "index",
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    },
    "applicationUrl": "https://*:50697"  // 關鍵：綁定所有介面
  }
}

方法二：命令列啟動指定 URLs

dotnet run --urls "https://*:50697"

方法三：手機瀏覽器開發者工具除錯

1. Chrome 開啟 chrome://inspect
2. 手機連接 USB 開啟 USB 除錯
3. PC 端即可即時檢視手機頁面 Console、Network、Elements

響應式設計測試替代方案

無需實體手機，Chrome DevTools 內建裝置工具列（Ctrl+Shift+M）可模擬各機型解析度、User-Agent、觸控事件，並支援網路節流模擬弱網環境，除錯效率遠高於實機測試。