https://blog.jiatool.com/tags/Debug/Recent content in Debug on IT 空間Hugo -- gohugo.iozhjia@jiatool.com (Jia)jia@jiatool.com (Jia)&copy;{year}, Jia All Rights ReservedSat, 12 Mar 2022 20:40:00 +0800https://blog.jiatool.com/posts/chrome_remote_debug/Sat, 12 Mar 2022 20:40:00 +0800jia@jiatool.com (Jia)Sat, 12 Mar 2022 20:40:00 +0800https://blog.jiatool.com/posts/chrome_remote_debug/前言 在電腦上我們想要除錯(Debug)網頁，可以使用 Chrome 的開發人員工具。 但在手機上呢？手機端無法開啟開發人員工具，不過不同的設備可能有不同的情<h2 id="前言">前言</h2> <p>在電腦上我們想要除錯(Debug)網頁，可以使用 Chrome 的開發人員工具。<br /> 但在手機上呢？手機端無法開啟開發人員工具，不過不同的設備可能有不同的情況，在電腦上無法完全呈現出來，電腦測明明就好好的，可是用手機開就會出錯，又看不到 console 視窗。</p> <p>這時，你可以採用 Chrome 的遠程調試(Debug)裝置功能，只需要透過 USB 傳輸線，即可在電腦端 Debug 網頁、查看 Console 內容。</p> <br/> <figure > <img data-src="https://res.cloudinary.com/jiablog/chrome_remote_debug/dog_computer.jpg" alt="圖片來源：Unsplash" data-caption="圖片來源：Unsplash" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='500px' height='' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload" style="width:500px;height:;"/> <figcaption style="text-align: center;"> 圖片來源：Unsplash </figcaption> </figure> <br/> <!--adsense--> <h2 id="步驟">步驟</h2> <p>首先要將手機連接到電腦，確保 Chrome 的 DevTools 可以偵測到手機裝置，再來才能在電腦上調試(Debug)手機上的網頁。</p> <br/> <h3 id="連接手機到電腦">連接手機到電腦</h3> <ol> <li> <p>將 Android 手機透過 USB 傳輸線連接到電腦。</p> </li> <li> <p>開啟手機「USB 偵錯」功能。<br /> 進入手機的「設定」&gt;「開發人員選項 (Developer Options)」&gt;「啟動 USB 偵錯 (Enable USB Debugging)」。<br /> * 不同品牌手機，開發人員選項位置會有差異，像是我的是在「設定」&gt;「系統」底下。<br /> * 如果你手機尚未開啟&quot;開發人員選項&quot;，可以上網尋找教學文章，不同品牌手機會有一些些差異，例如 設定 &gt; 系統 &gt; 關於手機 &gt; 軟體資訊 &gt; (多次點擊)版本號碼。</p> <figure > <img data-src="https://res.cloudinary.com/jiablog/chrome_remote_debug/enable_usb_debugging.jpg" alt="手機端啟動 USB 偵錯" data-caption="手機端啟動 USB 偵錯" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='350px' height='' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload" style="width:350px;height:;"/> <figcaption style="text-align: center;"> 手機端啟動 USB 偵錯 </figcaption> </figure> </li> <li> <p>手機和電腦都打開 Chrome (必須登入 Google 帳戶、不能使用無痕模式)。</p> </li> <li> <p>電腦端在網址列輸入 <code>chrome://inspect#devices</code>。<br /> 會進入 DevTools 的 Devices 列表，確保「Discover USB devices」有勾選，並稍等它抓取裝置，將會出現手機的型號名稱。</p> <figure > <img data-src="https://res.cloudinary.com/jiablog/chrome_remote_debug/chrome_devtools.jpg" alt="Chrome DevTools 的 Devices 列表" data-caption="Chrome DevTools 的 Devices 列表" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='550px' height='' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload" style="width:550px;height:;"/> <figcaption style="text-align: center;"> Chrome DevTools 的 Devices 列表 </figcaption> </figure> <p>* 如果它顯示 <code>Pending authentication: please accept debugging session on the device.</code>，則需到手機點選允許 USB 偵錯 (Allow USB Debugging)。</p> <figure > <img data-src="https://res.cloudinary.com/jiablog/chrome_remote_debug/allow_usb_debugging.jpg" alt="手機端允許 USB 偵錯" data-caption="手機端允許 USB 偵錯" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='300px' height='' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload" style="width:300px;height:;"/> <figcaption style="text-align: center;"> 手機端允許 USB 偵錯 </figcaption> </figure> <p>* 如果無法找到手機裝置，可以到手機內 「開發人員選項」&gt; 「撤銷 USB 偵錯授權」(Revoke USB Debugging Authorizations)，然後再重試一遍。<br /> * 在某些裝置或遇到其他情況無法連接，可到文章底下的官方參考資料尋找解答。</p> </li> </ol> <br/> <h3 id="在電腦上調試debug手機上的網頁內容">在電腦上調試(Debug)手機上的網頁內容</h3> <ol start="5"> <li> <p>確保手機是解鎖狀態(或螢幕維持常開)，不然電腦端不會讓你互動、Debug。</p> </li> <li> <p>電腦 Chrome 應該會出現手機內 Chrome 的分頁。<br /> (確認手機上的 Chrome 是開啟的。)</p> <figure > <img data-src="https://res.cloudinary.com/jiablog/chrome_remote_debug/show_device_tab.png" alt="顯示手機內 Chrome 的分頁" data-caption="顯示手機內 Chrome 的分頁" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='600px' height='' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload" style="width:600px;height:;"/> <figcaption style="text-align: center;"> 顯示手機內 Chrome 的分頁 </figcaption> </figure> </li> <li> <p>選擇一個分頁，或輸入想 Debug 的網頁後按 Open，點擊「inspect」進入開發人員工具。</p> <figure > <img data-src="https://res.cloudinary.com/jiablog/chrome_remote_debug/open_tab.png" alt="開啟手機 Chrome 分頁" data-caption="開啟手機 Chrome 分頁" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='600px' height='' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload" style="width:600px;height:;"/> <figcaption style="text-align: center;"> 開啟手機 Chrome 分頁 </figcaption> </figure> </li> <li> <p>你可以在「手機」或「電腦」上操作，兩邊會互相同步哦~</p> </li> <li> <p>接下來就可以像一般我們操作一樣，去 Debug 手機端的網頁囉。🎉🎉🎉</p> <figure > <img data-src="https://res.cloudinary.com/jiablog/chrome_remote_debug/debug_device_page.jpg" alt="Debug 手機端的網頁" data-caption="Debug 手機端的網頁" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='800px' height='' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload" style="width:800px;height:;"/> <figcaption style="text-align: center;"> Debug 手機端的網頁 </figcaption> </figure> </li> </ol> <br/> <!--adsense--> <h2 id="結語">結語</h2> <p>當遇到網頁在 PC 電腦端上開明明都是正常的，改在手機端開就出現莫名其妙的問題，就可以透過以上方式來方便我們除錯 Debug。</p> <br/> <p>歡迎追蹤『<a href="https://www.facebook.com/jiatool" target="_blank" rel="noopener"> IT空間 </a>』FB 粉專，取得最新發文通知🔔</p> <br/> <br/> <hr /> <p>參考：<br /> <a href="https://developer.chrome.com/docs/devtools/remote-debugging/" target="_blank" rel="noopener"> Remote debug Android devices | Chrome Developers </a><br /> <a href="https://pjchender.dev/webdev/google-developer-chrome-remote-debug-mobile/" target="_blank" rel="noopener"> Chrome Remote Debug with Mobile | PJCHENder </a><br /> <a href="https://ithelp.ithome.com.tw/articles/10209412" target="_blank" rel="noopener"> 手機遠程測試 | iT邦幫忙 </a></p> <br/> <blockquote> <p>大部分的人都會懷念以前「單純」的生活，有「攻略」可以照著玩的日子。<br /> 但是在開放世界中，我們才有機會走出「自己的路」。</p> </blockquote>Jiafeatured imagemeta imageChromeDebug網頁網站