移動端H5真機調試方案
今年入職了一家做直播的公司，主要是負責APP中內嵌webview頁面的開發，之前移動端兼容經驗比較少，對於我來說最大的困擾就是網頁兼容性問題。 在Chrome瀏覽器的模擬器進行開發調試已經完美完成了需求之後，一到驗收或者上線，就出現各種兼容引起的bug，要解決還特別曲折，不僅要探索Android和iOS手機的不同調試方式，還要支持在不同瀏覽器或者APP上調試，極大的影響了開發的效率。 雖然我們也可以通過模擬器進行開發調試，但模擬終究是模擬，在某些場景下真機還是不可或缺，尤其是特定機型版本的問題。 一般情況下，真機Web調試要怎麼做呢？ 一、vConsole npm地址： github.com/Tencent/vCo… 介紹： vConsole插件是一個移動端輕量可擴展的工具，其功能和電腦端的控制台基本一致，能運行JS代碼、查看cookie、抓包等 使用： 在head中添加如下代碼即可 <script src=”https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js”></script> <script> // 初始化 var vConsole = new VConsole(); console.log(“hello vconsole”); </script> 复制代码 如果是想通過npm安裝或者對於TypeScript的使用方式請去倉庫查看！ 調試： 面板： 其實和console控制台一樣，打開一個頁面的時候，下方會出現一個綠色的“vConsole”按鈕，點擊按鈕即可打開控制台，在“log”頁面中輸入JS代碼，即可執行腳本，“Network”頁面為分析網絡會話列表，“System”頁面顯示協議頭User-Agent、系統信息網絡狀態等信息，“Storage”頁面為cookie信息等 二、Eruda npm地址： github.com/liriliri/er… 介紹： Eruda 是一個專為前端移動端、移動端設計的調試面板，類似Chrome DevTools 的迷你版（沒有chrome強大這個是可以肯定的），其主要功能包括：捕獲console 日誌、檢查元素狀態、顯示性能指標、捕獲XHR請求、顯示本地存儲和Cookie信息、瀏覽器特性檢測等等。 使用： 在head中添加如下代碼即可 <script src=”//cdn.jsdelivr.net/npm/eruda”></script> <script>eruda.init();</script> 复制代码 Eruda 的使用方法和麵板跟vConsole差不多，更詳細的使用方法可去官方倉庫查看！ 三、Fildder 下載地址： www.telerik.com/fiddler 介紹： Fiddler是最強大最好用的Web調試工具之一，它能記錄所有客戶端和服務器的http和https請求，允許你監視，設置斷點，甚至修改輸入輸出數據，Fiddler無論對開發人員或者測試人員來說，都是非常有用的工具 使用： 1、下載安裝並配置好fillder工具 2、手機和fildder鏈接同一個網絡，然後手機開啟手動代理並安裝證書 a.配置手動代理 […]
Create Login Signup UI Screens in Vue with Bootstrap 4
In this tutorial, we are going to create responsive Login & Signup UI screens using the Bootstrap 4 CSS framework in the Vue.js application. We will create a Login screen, Sign up screen, and Forgot Password screen from scratch. Bootstrap is a free and open-source CSS based UI framework, and It is used for rapid front-end […]