這個問題在我看網易的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%的頁面都出來了!
三、站在大佬的肩膀上看大佬的源碼
哈哈哈,要知道微信有微信開發者工具啊,
更值得慶幸的是他還有網頁調試模式啊:
可以新建項目時選擇右邊這個“公眾號網頁項目”就行了。
或者在菜單欄更改調試模式:
然后正常輸入網頁的鏈接,頁面就出來啦: