工具 - 怎么看微信h5的源碼?


這個問題在我看網易的h5案例的時候萌生的。因為想看他的源碼,但是手機微信打開肯定看不了。

以下幾種看代碼的方法:(頁面案例用網易大大刷屏的h5《二零一六娛樂圈畫卷》,真的是一個值得我等眾生摩拜的項目!)

一、麻煩一點的配代理在手機端添加控制台看

這個材料需要:

Fiddler抓包工具(自己下載一個,使用教程見https://www.cnblogs.com/padding1015/p/9004742.html

vconsole.min.js(npm上下載一個,或者github里搜索下載一個。安裝方法:https://www.cnblogs.com/padding1015/p/9228696.html)。

手機配完fiddler代理后,重開頁面,然后抓到index.html,然后down到本地,添加上vconsole的代碼。

再將線上的index.html指向到本地文件(這種教程去百度詞條搜索“fiddler 代理線上頁面指向到本地文件”)。

然后手機上就有這個控制台可以看了:

 

總結:雖然麻煩,但是適用於設置了必須微信環境打開的項目。

 

 

二、簡單一點的直接在電腦F12控制台查看

 其實有時候,你直接將項目鏈接貼到瀏覽器會發現這種提示:

哈哈,還是得手機看。還是得返回第一種情況看源碼嗎?

no,我發現個小技巧:

具體操作:

  • 瀏覽器粘貼地址,出現上邊靜態圖二維碼效果
  • F12打開控制台
  • 控制台左上角點擊后,切換成模擬器效果
  • F5重刷頁面

這一套操作下來,基本上百分之90%的頁面都出來了!

三、站在大佬的肩膀上看大佬的源碼

哈哈哈,要知道微信有微信開發者工具啊,

更值得慶幸的是他還有網頁調試模式啊:

 可以新建項目時選擇右邊這個“公眾號網頁項目”就行了。

或者在菜單欄更改調試模式:

然后正常輸入網頁的鏈接,頁面就出來啦:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM