網站 on IT 空間

Chrome Remote Debug，在電腦上為手機網頁除錯 (以 Android 為例)

jia@jiatool.com (Jia) — Sat, 12 Mar 2022 20:40:00 +0800

前言

在電腦上我們想要除錯(Debug)網頁，可以使用 Chrome 的開發人員工具。
但在手機上呢？手機端無法開啟開發人員工具，不過不同的設備可能有不同的情況，在電腦上無法完全呈現出來，電腦測明明就好好的，可是用手機開就會出錯，又看不到 console 視窗。

這時，你可以採用 Chrome 的遠程調試(Debug)裝置功能，只需要透過 USB 傳輸線，即可在電腦端 Debug 網頁、查看 Console 內容。

圖片來源：Unsplash

步驟

首先要將手機連接到電腦，確保 Chrome 的 DevTools 可以偵測到手機裝置，再來才能在電腦上調試(Debug)手機上的網頁。

連接手機到電腦

將 Android 手機透過 USB 傳輸線連接到電腦。
開啟手機「USB 偵錯」功能。
進入手機的「設定」>「開發人員選項 (Developer Options)」>「啟動 USB 偵錯 (Enable USB Debugging)」。
* 不同品牌手機，開發人員選項位置會有差異，像是我的是在「設定」>「系統」底下。
* 如果你手機尚未開啟"開發人員選項"，可以上網尋找教學文章，不同品牌手機會有一些些差異，例如設定 > 系統 > 關於手機 > 軟體資訊 > (多次點擊)版本號碼。

手機端啟動 USB 偵錯
手機和電腦都打開 Chrome (必須登入 Google 帳戶、不能使用無痕模式)。
電腦端在網址列輸入 chrome://inspect#devices。
會進入 DevTools 的 Devices 列表，確保「Discover USB devices」有勾選，並稍等它抓取裝置，將會出現手機的型號名稱。

Chrome DevTools 的 Devices 列表

* 如果它顯示 Pending authentication: please accept debugging session on the device.，則需到手機點選允許 USB 偵錯 (Allow USB Debugging)。

手機端允許 USB 偵錯

* 如果無法找到手機裝置，可以到手機內「開發人員選項」> 「撤銷 USB 偵錯授權」(Revoke USB Debugging Authorizations)，然後再重試一遍。
* 在某些裝置或遇到其他情況無法連接，可到文章底下的官方參考資料尋找解答。

在電腦上調試(Debug)手機上的網頁內容

確保手機是解鎖狀態(或螢幕維持常開)，不然電腦端不會讓你互動、Debug。
電腦 Chrome 應該會出現手機內 Chrome 的分頁。
(確認手機上的 Chrome 是開啟的。)

顯示手機內 Chrome 的分頁
選擇一個分頁，或輸入想 Debug 的網頁後按 Open，點擊「inspect」進入開發人員工具。

開啟手機 Chrome 分頁
你可以在「手機」或「電腦」上操作，兩邊會互相同步哦~
接下來就可以像一般我們操作一樣，去 Debug 手機端的網頁囉。🎉🎉🎉

Debug 手機端的網頁

結語

當遇到網頁在 PC 電腦端上開明明都是正常的，改在手機端開就出現莫名其妙的問題，就可以透過以上方式來方便我們除錯 Debug。

歡迎追蹤『 IT空間』FB 粉專，取得最新發文通知🔔

參考：
Remote debug Android devices | Chrome Developers
Chrome Remote Debug with Mobile | PJCHENder
手機遠程測試 | iT邦幫忙

大部分的人都會懷念以前「單純」的生活，有「攻略」可以照著玩的日子。
但是在開放世界中，我們才有機會走出「自己的路」。

使用「郵局Visa金融卡」開啟 Google Cloud Platform

jia@jiatool.com (Jia) — Sat, 27 Jun 2020 14:30:30 +0800

前言

本篇教學主要是如何使用「郵局Visa金融卡」來開啟 Google Cloud Platform，至於 GCP 有 $300美元(12個月) 的試用額度可以參考別人的介紹文章。
開通的過程並不會遇到難懂的地方，因此我以圖片並加簡單敘述。

流程

首先進入 Google Cloud Platform網站，登入後點擊右上角免費試用。

GCP網頁

確認帳戶。

註冊GCP

依照欄位說明填入資料。

註冊GCP

這邊按照Visa卡上的資訊填入。

註冊GCP

郵局Visa金融卡
需開啟"國外交易"、"非過卡交易"功能，我都是使用網路ATM設定(需要讀卡機)。
如有缺少沒開啟功能的話，輸入卡號下一步會顯示錯誤，並收到如下簡訊。

功能尚未開啟簡訊

請參考中華郵政網站說明，我是使用中華郵政WebATM。

看到這個頁面就代表已經成功設定，可以開始免費試用囉~

完成註冊GCP

會顯示剩餘可使用的免費試用額度

GCP試用額度

如有遇到其他問題，或文章內容有誤，歡迎底下留言~😙

參考：
Google Cloud Platform 官方

時間之所以不會重來，是因為人本來就應該往前走。

—— 藤井樹

部署 Hugo 在 Netlify

jia@jiatool.com (Jia) — Sat, 13 Jun 2020 22:10:00 +0800

前言

參考這篇「如何使用 Hugo 建立一個靜態網站」創建了一個靜態網站出來，本篇則示範如何將 Hugo 部署到 Netlify 上。

* 至於 "Netlify 如何註冊"、"使用 Flask 創建" 的相關文章，也可以參考我之前寫的另外一篇「使用Python、Flask和Netlify創建簡單的靜態網站」。

部署到Netlify

首先在專案根目錄新增一個檔案 netlify.toml。
* 此處可以參考官方說明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


[build]
publish = "public"
command = "hugo --gc --minify"
[context.production.environment]
HUGO_VERSION = "0.72.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
[context.split1]
command = "hugo --gc --minify --enableGitInfo"
[context.split1.environment]
HUGO_VERSION = "0.72.0"
HUGO_ENV = "production"
[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
[context.deploy-preview.environment]
HUGO_VERSION = "0.72.0"
[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
[context.branch-deploy.environment]
HUGO_VERSION = "0.72.0"
[context.next.environment]
HUGO_ENABLEGITINFO = "true"

將專案 Git 推上去(Push)到提供代管的服務平台，目前 Netlify 可以連接的有 GitHub、GitLab、Bitbucket 三個。
有關 Git 相關教學，可參考其他人的文章。

前往 Netlify 去新增一個網站(New site from Git)。

選擇Git平台

這邊它會自動抓取根目錄的 netlify.toml 檔案。

自動抓取設定檔

接下來等它部署完成。

部署完成

網域設定

前往 Domain settings 來去設定我們的網域。
* 至於如何購買網域，可以參考如何從 Google Domains 購買網域

Add custom domain

輸入網域

這邊會有這個警告，因為我們還沒去 DNS 設定啊~

Check DNS configuration

像我是使用 Google Domains ，裡面就可以設定 DNS。
"名稱" 隨你設定；選擇 "CNAME"；
"網域名稱" 輸入 Netlify 專案中預設的 subdomain (如上圖)

DNS 設定

HTTPS 設定

回到 Netlify 專案頁面往下滾，會看到 HTTPS 的設定，
點擊 Verify DNS configuration

HTTPS設定

當通過驗證後，會呈現如下圖。

HTTPS設定

前往你設定的網址(例如：https://blog.jiatool.com/)來看看是否成功吧~
不過要注意 SSL 憑證可能沒那麼快設定好生效，需要一段時間，
不確定多久，但我過了一小時去看已經好了。

SSL憑證已生效

遇到問題

如果你和我一樣使用 zzo主題，並且在部署時遇到以下錯誤：

JSON parse error

目前我有兩種解決辦法。

第一種
將 netlify.toml 檔案裡的 --minify 刪除，按照官方說明此參數是代表
minify any supported output format (HTML, XML etc.)

第二種
我發現只要將 content > en > publication 的資料夾移除即可，因此如果不會用到這個版型，就先將它拿掉吧。

我也有在 GitHub 上詢問過主題的作者，但他目前好像也不知道為什麼(? 🤣

如有遇到其他問題，或文章內容有誤，歡迎底下留言~😙

參考：
Host on Netlify | HUGO 官方
 Netlify 免費版！自建 Hugo 站台，並綁定域名與SSL安全憑證教學 | 梅問題教學網

這世界本來就瘋狂，你儘管去做認為正確的事。

—— 新海誠