Chrome on IT 空間

Chrome Snippets 執行 JavaScript 程式片段

jia@jiatool.com (Jia) — Sat, 03 Dec 2022 21:15:00 +0800

前言

如果我們在 Chrome 上想執行一段 JavaScript 程式碼時，會打開開發人員工具的 Console 頁面來執行。

開發人員工具的 Console 頁面

如果我們有段 Code 有時會重複使用到，例如想破解網頁不能按右鍵、加入快捷鍵、提取文字等等操作，難道每次都要再打一次？或者還要另外儲存再用複製貼上？那也太麻煩了吧😫
那你可以試試改用 Snippets (片段)功能，來運行 JavaScript。

* 之前動畫瘋還沒有彈幕的快捷鍵時，我就是透過這種方法來幫它加上快捷鍵 XD

開發人員工具的 Sources 頁面

其實這概念類似小書籤 (bookmarklet，又叫書籤小程式)。

除了 Chrome 以外，只要是基於 Chromium 開發的瀏覽器也有此項功能，像是 Microsoft Edge 和 Opera。

前往 Snippets 頁面

在瀏覽器中(以下以 Google 的 Chrome 來示範) 打開開發人員工具(F12)，並切換到 Sources > Snippets，這邊就是讓我們撰寫、儲存、執行 JS 片段的的地方。

Snippets 頁面

* 如果沒看到「Snippets」tag，可以點擊旁邊的 …(More tabs) 符號。

加入 Snippets 片段

這邊為了示範，我隨便舉個例子。
例如我想要複製巴哈姆特 GNN 新聞的標題，但一個一個框選、複製、貼上太麻煩，因此我需要透過 JS 幫我整理出來我只需要複製一次就好。

首先，透過 Elements 頁面找到標題文字的元素，得知其 CSS Selector 是 .BH-lbox > .GN-lbox2B > h1 > a，取得其文字的 JS 寫法如下:

1

document.querySelector(".BH-lbox > .GN-lbox2B > h1 > a").textContent;

* 對於 CSS Selector 規則有興趣的可以參考我之前整理的這篇：常用網頁 CSS Selector (選擇器)取得元素，搭配 Python BeautifulSoup 套件。

GNN 新聞標題的元素

先透過開發人員工具的 Console 確認一下：

擷取 GNN 新聞的標題

完成我們的程式，將全部標題抓出來，並輸出在 Console 的程式碼如下：

1
2
3
4
5
6


var newsTitleEles = document.querySelectorAll(".BH-lbox > .GN-lbox2B > h1 > a");
var newsTitles = [];
newsTitleEles.forEach( ele => {
newsTitles.push(ele.textContent);
});
console.log(newsTitles.join('\n'));

點擊 New snippet 來新增一個空白的片段，將程式碼貼進去，並按 Ctrl+S（Windows和Linux）或 Command+S（Mac）保存。

Snippets 新增片段

執行

寫好 JS 片段後該如何執行呢？

你應該有發現下方的三角形圖示，點擊圖示後即可執行 (Ctrl+Enter 快捷鍵也可以)。

執行 JS 片段

除了可以在 Snippets 頁面中執行，還可以透過 Command Menu 執行。

確認在瀏覽器的「開發人員工具(F12)」，按 Control+O（Windows和Linux）或 Command+O（Mac）開啟 Command Menu。
輸入 ! 後點選想要執行的 snippet 名稱。

透過 Command Menu 執行 JS 片段

* 如果沒出現剛剛儲存的片段，可以把開發人員工具關掉再重整網頁重開後試試。

結語

透過開發人員工具的 Snippets 功能，可以保存並在需要時執行。但有個缺點是每次都要手動去點選執行，它沒辦法設定打開指定網址時自動執行。

好在，有個很有名的擴充套件 Tampermonkey，它有這項功能，就像是 Snippets 的進階版一樣！👍
* 但聽說 Tampermonkey 這類自訂腳本擴充套件，會因為之後 Chromium 內建的 Manifest 更新版，而導致無法使用 QAQ，希望能有解決辦法或替代方案出來。

參考：
Run snippets of JavaScript | Google Developers 文件說明

永遠不要讓別人的冷漠，影響了你對這世界的熱情

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邦幫忙

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

如何關閉 Chrome「閱讀清單」的兩種方法

jia@jiatool.com (Jia) — Sat, 30 Oct 2021 20:45:00 +0800

前言

最近 Chrome 瀏覽器更新後，討厭的「閱讀清單」功能又被打開了，而且還不能用舊有的方式關閉。

我也不太懂為何要特別設置閱讀清單，直接在書籤建立個資料夾，存放我稍後要看的網頁，這不就是相似的概念？

雖然位於書籤列左邊的「閱讀清單」區塊可以透過右鍵去隱藏，但還有點擊"加入書籤"的星星還是會跑出來。

接下來教你兩種，我在網路上找到關閉閱讀清單的方法。
(則一操作即可)

「閱讀清單」區塊

第一種、flags 頁面設定

瀏覽器開啟 chrome://flags/ 頁面。

先將 M93、M94 設為 Enabled，並重啟 Chrome 瀏覽器。

Temporarily unexpire M93 flags.
Temporarily unexpire M94 flags.

(找不到 M93、M94 ，可以在上方搜尋)

Enabled M93、M94

接下來只要像以前的方式操作，
一樣到 chrome://flags/ 頁面，再搜尋 Reading List，將其 Disabled。

Disabled Reading List

重啟 Chrome 瀏覽器後「閱讀清單」應該就被關閉了。

第二種、捷徑加上參數

找到你平常開啟的 Chrome 捷徑，對其滑鼠右鍵 > 內容，
在"目標"欄位後方加上 --disable-features=ReadLater 參數。
(中間要有空格)

Chrome 捷徑的目標後方加上參數

例如原本是：
"C:\Program Files\Google\Chrome\Application\chrome.exe"
加上參數後變成：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-features=ReadLater

如果出現需要系統管理員視窗，點擊繼續即可。

如果出現此視窗，點擊繼續即可

這樣你使用此捷徑打開瀏覽器的話，就不會有「閱讀清單」。

結語

以上這兩種方法，「目前」都可以達成關閉閱讀清單，但在第一個方法中 M93、M94 的內容寫到：

Temporarily unexpire flags that expired as of M93. These flags will be removed soon.

所以很可能這些方法之後會失效，恩…看來會被強迫使用了呢😓

如希望取得最新文章通知🔔，歡迎追蹤『 IT空間』FB 粉專。

參考：
【問題】Chrome的閱讀清單到底是什麼低能設計
 chrome95关闭阅读清单功能(Reading List)
How to Enable or Disable Reading List Feature in Google Chrome