如何使用微信開發者工具調試在微信端訪問的網頁

2020-10-20 汪子熙

假設我用vue開發了一個web應用,需要在手機微信裡訪問並調試, 可以按照本文介紹的步驟,使用微信開發者工具來調試.

假設我的web應用的訪問入口是如下公眾號菜單的"預約"按鈕:

那麼為了能夠在微信開發者工具裡調試,需要首先進入該公眾號的後臺,在web開發者工具裡,將我本人的微信號添加進去:

點擊"綁定開發者帳號":

輸入待綁定的微信帳號:

點擊綁定,該微信號會收到一條消息,詢問是否綁定:

點擊同意操作完成綁定.

接下來,把要調試的web應用的url放到微信開發者工具地址欄裡,回車之後,微信開發者工具就會彈出一個詢問窗口,點擊Allow之後,就可以在微信開發者工具提供的類似Chrome開發者工具調試器一樣的界面裡進行單步調試了.

這個粘貼到地址欄的url很有講究。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect
其中appid=後面的值，是從微信公眾號控制臺裡拷貝出來的appid：

redirect_uri, 即為我們開發的web應用，部署到伺服器之後生成的url，需要經過url encode處理：

這個url準備好之後，將其粘貼到微信開發者工具地址欄裡，回車，即可看到一個對話窗口，要求獲得我們公開信息的許可：

點擊Allow之後，就可以像使用Chrome開發者工具的調試器一樣，在微信開發者工具裡進行單步調試了：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

相關焦點

  • 新版微信開發者工具可期:支持PC小程序調試、圖標更新
    據IT之家網友「stevapple」投稿，微信團隊消息，微信開發者工具穩定版 1.02.2003250 近日更新：雲開發支持按量付費、PC小程序調試、圖標更新等。以下為官方更新公告：1. 編輯器優化微信開發者工具的編輯器功能經過重新調整，優化並增加了若干功能。
  • 逆向小程序破解工具篇-(微信開發者工具)
    本章節主要分享動態調試小程序逆向js的工具 微信開發者工具, 如何把js項目放工具中運行，調試，其中會有一些錯誤如何解決， 到最後可以直接運行，並進行調試列印出參數。環境：資源安裝下載：點擊上方連接進行下載，根據電腦版本進行下載。下載完以後具體安裝及註冊咱們就不說了。浪費時間我也不太想寫，忒麻煩。
  • 如何在微信開發者工具中開啟雲開發
    工具微信開發者工具微信管理後臺技術微信小程序JavaScriptwxmlwxss之前都是使用微信小程序普通開發，沒有嘗試過雲開發；這兩天看了下小程序雲開發，發現其中有好多要學；首先，要開通雲開發服務；其次，要創建並部署雲函數
  • 微信開發者工具更新:編輯器優化 清除訂閱消息授權數據
    據IT之家網友「stevapple」投稿，微信團隊消息，微信開發者工具穩定版 1.02.2003250 近日更新：雲開發支持按量付費、PC小程序調試、圖標更新等。　　以下為官方更新公告：　　1. 編輯器優化　　微信開發者工具的編輯器功能經過重新調整，優化並增加了若干功能。
  • 微信小程序開放網頁版入口,電腦端可以用小程序了?
    微信小程序的流量入口越來越多，微信賦予小程序的功能越來越強大！據微同圈小程序官網獲悉，電腦端可以用微信小程序了！又開放了網頁版入口。微信發布新版本，新增「我的小程序」入口7月13日，微信更新了iOS 6.7.1版本，在最新版本的微信中，新增了「我的小程序」入口。小程序的復用率將會大幅度提升。
  • 微信小程序開發系列教程三：微信小程序的調試方法
    微信小程序開發系列教程這個教程的前兩篇文章，介紹了如何用下圖所示的微信開發者工具自動生成一個Hello World的微信小程序，並講解了這個自動生成的微信小程序的視圖開發原理。這個系列的下一步，會繼續介紹這個微信小程序的控制器index.js的實現。
  • 如何在電腦上模擬手機和微信訪問網站
    你的網站支持手機端訪問嗎？微信中打開網站會是什麼樣子？一般情況下我們都是把網址發送到手機中打開檢測效果，這樣測試起來很不方便，今天就告訴大家一個使用谷歌或360瀏覽器模擬手機或微信訪問網站的方法。我們這裡使用米拓建站響應式模板（兼容電腦端和手機端）https://show.metinfo.cn/m/mui097/328/ 為例模擬手機端打開：第一步，在谷歌瀏覽器或360瀏覽器中打開網址
  • 開發者福利:小i推智慧機器人SDK工具包
    近日，小i推出了智慧機器人SDK工具包，為機器人愛好者和軟體開發者提供了便利。智慧機器人API與SDK工具包：iBot Cloud在為微信、微博、網頁等主流平臺提供接入方式後，還對廣大開發者開放了API的接入，開發者可以通過API接口與iBot Cloud進行快速對接，從而為自己的應用程式增加豐富的智能交互體驗和功能支持
  • H5 移動端調試全攻略
    四、Spy-Debuggerspy-debugger：移動端調試的利器，便捷的遠程調試手機頁面、抓包工具。安裝證書的時候需要注意以下幾件事情：1.手機必須先設置完代理後再通過(非微信)手機瀏覽器訪問 http://s.xxx (地址二維碼)安裝證書；2.手機首次調試需要安裝證書，已安裝了證書的手機無需重複安裝；3.手機和 PC 保持在同一網絡下（比如同時連到一個 WIFI 下）；切記：行動裝置和 PC 必須在一個 WIFI
  • Eruda 2.0 發布:移動端調試工具
    Eruda 移動端調試工具在 1.5.4 版本發布後有長達半年多的時間暫停了更新，於今年下半年重新投入精力開發，主要針對之前被詬病較多的 console 性能進行了優化，同時也對工具的整體外觀做了一定調整
  • .NET開發者必備的11款免費工具
    如今，HTML5，jQuery，JavaScript等等這些熱門技術，受到了開發者們的強烈追捧，有了這些開發工具也為開發者們減輕了許多負擔。本文為開發者介紹了11款.NET框架，這些框架有很多優點，比如提供用戶界面，數據訪問，資料庫連接，Web應用開發，加密，數值算法算法，網絡通信，以及一些其它的服務。
  • 微信小程序中如何使用WebSocket實現長連接(含完整源碼)
    這篇文章分享了一個基於WebSocket長連接的微信小程序——簡單的剪刀石頭布小遊戲的製作過程，希望能對想要在微信小程序中使用 WebSocket 的開發者有所幫助。但是由於微信的限制（不能使用 window 等對象）， SocketIO 的客戶端代碼在微信小程序平臺上是無法運行的。經過對 SocketIO 通信進行抓包以及研究其客戶端源碼，筆者封裝了一個大約 100 行適用於微信小程序平臺的 WxSocketIO類，可以幫助開發者快速使用 SocketIO 來進行 WebSocket 通信。
  • 微信電腦版網頁版登錄_微信電腦版網頁版在線登錄_18183軟體下載
    微信同QQ一樣，是騰訊官方推出的一款全民聊天工具，英文名Wechat。微信電腦版客戶端和微信網頁版相似，但使用起來更加方便。微信PC版界面非常的簡潔，可用作即時聊天和文件分享，整個界面無廣告，玩遊戲聊天兩不誤!
  • 錯過就要等一年 深圳微信開發者大會不容錯過的十大理由
    另外，作為首批微信企業號的嘗鮮者，在企業號的開發和使用上，南航也有自己的獨到之處，屆時歡迎參會者與鄭煒暘切磋交流。說到企業號，除了鄭煒暘演講中涉及企業號的開發與運營之外，主辦方還邀請到長安汽車股份有限公司管理創新與IT中心總工程師、原南航信息中心CTO龍庚，他將帶來《長安汽車微信企業號是如何煉成》的專場主題演講，演講內容將主要圍繞長安汽車微信企業號的幾個階段，包含認證、連接、業務構建以及實施部署方面的故事，特別是如何和已有的企業移動平臺的連接和企業App的復用，以及集成工作中遇到的痛點及解決辦法
  • 大浪淘沙程式設計師精品工具箱軟體推薦2:Firefox與網頁前端調試工具
    這種轉換的艱難很大程序上是不了解對方的工作環境，其實代碼和布局的原理是一樣的，比如我不做前端是無論如何不知道 firefox 還能調試程序的，隔行如隔山那！即使大家都是程式設計師。今天介紹的這個就是前端開發中非常重要的一種工具。假設這樣一種情況，我們的程序（對於前端就是 html/css/javascript），發布後經常會因為兼容性等等各種原因導致出來的效果不對。
  • 微信小程序該如何開發？
    微信小程序是一種基於微信公眾平臺，且不需要下載安裝就可以使用的應用，它實現了應用「觸手可及」的夢想，用戶通過微信掃一掃或搜一下即可打開應用。那麼小程序該如何開?  3、開發小程序：首先要下載微信官方的微信Web開發者工具。打開微信公眾平臺，找到右下方的小程序模塊，點擊開發按鈕。然後點擊頂部導航欄的工具按鈕，在新頁面的左側欄中找到下載。
  • 微信網頁版怎麼用 微信網頁版登陸方法
    微信是我們大部分玩手機的朋友離不開的社交軟體，使用微信app能夠讓你更加方便的與自己的親朋好友聊天。有的朋友想用電腦登陸微信，該怎麼操作呢？下面2265小編給大家帶來微信網頁版登錄方法。     微信網頁版地址：wx.qq.com也可以通過下面的方式點擊進入：https://login.weixin.qq.com一、如何登錄微信網頁版微信網頁版雖然已經在內測中，只有使用同樣在內測中的微信掃描官方頁面上的二維碼，才能登錄微信網頁版。
  • 【技術文章】微信公眾平臺開發教程新手解惑40則
    微網站是新瓶裝老酒，被一些搞營銷的人給神化了，以至於很多開發者都在問什麼是微網站，如何開發微網站。微網站本質上就是以微信瀏覽器為入口的手機網站（Web APP），能夠兼容Android、iOS、WP等作業系統。
  • 安裝微信小程序開發者工具
    講解對象：安裝開發者工具作者：融水公子 rsgz1 雙擊安裝2 下一步8 防火牆點擊 允許9 手機微信掃一下
  • 每客筆記:基於微信的個人免費客戶管理工具
    只需要關注微信公眾帳號「meikebiji」而不需要註冊，就可以使用強大的個人客戶關係管理工具來管理業務和聯繫人，個人客戶管理工具【每客筆記】正在為CRM行業帶來創新。