移動端調(diào)試工具及相關(guān)概念總結(jié)

時(shí)間：2023-05-31 05:54:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-05-31 05:54:02 來源：網(wǎng)站運(yùn)營

第一單元(HTML5高級)

• pc端軟件
  
• 如：photoshop、360、騰訊QQ、谷歌瀏覽器等


• 移動端app
  
• 如：手機(jī)版QQ、微信、360、美顏相機(jī)等

• 程序就是一段代碼，一個(gè)功能，或者一個(gè)函數(shù)、一段邏輯，而軟件就是由大大小小的程序文件通過文件夾歸類整合組織在一起而形成的一個(gè)集合，我們每次安裝軟件都會選擇安裝位置，當(dāng)我們查看安裝位置的文件夾時(shí)，就會發(fā)現(xiàn)，軟件其實(shí)就是由一個(gè)個(gè)文件、文件夾包含文件這樣的形式存在的

• 目前市面上最常見的就是ios和android系統(tǒng)了，我們平時(shí)開發(fā)過程中只需要考慮安卓和ios就可以了

• 如何做出一款手機(jī)app呢？有以下三種方式！
  
• nativeapp(原生app)
  
• android(安卓)使用java或者c開發(fā)
  
• ios使用object-c或者Swift(蘋果公司開發(fā)用于開發(fā)ios軟件的編程語言和object-c差不多，只是入門門檻更低)或c進(jìn)行開發(fā)
  


• webapp
  
• 簡單來說就是觸屏版的網(wǎng)頁，使用html5開發(fā)，運(yùn)行于手機(jī)瀏覽器中，無需安裝和下載

• hybridapp(混合app)
  
• 外面是原生app的殼子，里面是webapp的應(yīng)用，兼具兩者優(yōu)勢，比如原生app可以操作系統(tǒng)，例如調(diào)起攝像頭、閃光燈、重力感應(yīng)、陀螺儀等等，但是原生app開發(fā)難度大，成本高，跨平臺開發(fā)需要兩套不同的原生代碼，而使用原生的殼子，開發(fā)量大大減少，內(nèi)置webapp，由于是網(wǎng)頁語言，開發(fā)效率高，跨平臺兼容性高，只需開發(fā)一套，套不同的殼子，通過應(yīng)用商店分發(fā)即可

• navigator.userAgent
  
• 我們都知道通過這個(gè)屬性我們能夠在pc端查看瀏覽器的信息，版本號、內(nèi)核等等，那么通過它也可以獲取移動端設(shè)備的運(yùn)行系統(tǒng)或者當(dāng)前設(shè)備的大概分類，因此便可以做不同的兼容

• 一般當(dāng)頁面在本地調(diào)試沒問題，當(dāng)?shù)綔y試環(huán)境、代理環(huán)境或者線上環(huán)境之后出現(xiàn)問題，用于頁面元素審查，樣式調(diào)整等
  
• 有線調(diào)試：
  
• 1.1、IOS 移動端 （Safari開發(fā)者工具）
  
• 手機(jī)端：設(shè)置 → Safari → 高級 → Web 檢查器 → 開。
  
• mac端：Safari → 偏好設(shè)置 → 高級 → 在菜單欄中顯示“開發(fā)”菜單。
  在 OS X 中啟動 Safari 之后，以 USB 電纜正常接入 iOS 設(shè)備，并在此移動設(shè)備上啟動 Safari。此時(shí)點(diǎn)擊計(jì)算機(jī)上的 Safari 菜單中的“開發(fā)”，可以看到有 iOS 設(shè)備的名稱顯示，其子菜單項(xiàng)即為移動設(shè)備上 Safari 的所有標(biāo)簽頁，點(diǎn)擊任意一個(gè)開始調(diào)試。
  


• 1.2、xcode開發(fā)者工具調(diào)試
  
• 如果沒有iOS設(shè)備，也可以在Xcode中模擬一臺，點(diǎn)擊頂部“Xcode”→“Open Developer Tool”→“iOS Simulator”即可打開一個(gè)iOS設(shè)備的模擬器，并且模擬器里面Safari打開的頁面，也是能通過上個(gè)步驟中MAC上的Safari調(diào)試

• 2、安卓移動端（chrome://inspect）
  
• 首先確保手機(jī)上和PC機(jī)上裝有最新版本的chrome瀏覽器，其次是將手機(jī)的開發(fā)者選項(xiàng)打開并允許調(diào)試，然后將數(shù)據(jù)線將兩臺設(shè)備連接起來。在PC機(jī)上打開chorme，輸入chrome://inspect ，然后在手機(jī)上打開chrome，然后手機(jī)會彈框詢問是否允許調(diào)試，點(diǎn)擊確定，當(dāng)手機(jī)鎖屏未出現(xiàn)提示時(shí)，拔掉usb線重新插入。
  
• 點(diǎn)擊inspect打開DevTools后，你可以選中頁面中的DOM元素，同時(shí)設(shè)備中對應(yīng)元素也高亮顯示，也可使用DevTools中的Inspect Element 選中目標(biāo)元素，可以實(shí)時(shí)與移動設(shè)備頁面交互，方便的定位問題所在，進(jìn)行代碼調(diào)試，如果有問題，請檢查chrome版本，如果調(diào)試頁面發(fā)生空白，則進(jìn)行翻墻代理，翻墻方法可在網(wǎng)上查找。
  

• browserSync
  
• 一款瀏覽器同步測試工具，可以在多端同時(shí)預(yù)覽，方便開發(fā)者進(jìn)行測試和解決兼容性問題
  
• 官網(wǎng)：http://www.browsersync.cn/
  
• 使用必要條件：
  
• 安裝nodejs(基于chrome V8引擎(js引擎)開發(fā)的用于運(yùn)行javascript的工具)
  
• windows系統(tǒng)
  
• 官網(wǎng)：http://nodejs.cn/
  
• 下載后，為一個(gè)安裝包，解壓一直next安裝即可
  
• 默認(rèn)安裝到C盤一般不需要配置環(huán)境變量，其他盤需要配置
  


• mac下載安裝包直接安裝即可或者使用其他軟件管理工具也可
  

• 使用node
  
• windows按住窗口鍵+r鍵打開搜索框，輸入cmd,點(diǎn)擊確定，即可打開終端 ，或者在具體文件夾中按住shift鍵+鼠標(biāo)右鍵，點(diǎn)擊右鍵菜單中的在此處打開命令窗口或者powershell即可，輸入node -v，能夠顯示版本號，表示安裝成功
  
• mac按住command + 空格鍵，打開搜索框，輸入終端即可，打開，輸入node -v，能夠顯示版本號，表示安裝成功
  


• 安裝browserSync
  
• npm install browser-sync -g 進(jìn)行全局安裝

• 必須在同一網(wǎng)絡(luò)下，電腦連接手機(jī)熱點(diǎn)也可以
  
• 啟動browserSync后，移動端直接訪問服務(wù)地址即可
  


• 啟動服務(wù)示例及要求：
  
• 啟動服務(wù)的位置必須保證和要監(jiān)聽的文件或文件夾在同一層級，因此，需要把終端中默認(rèn)顯示的目錄位置切換到具體文件夾，通過ls查看當(dāng)前目錄下的所有文件信息，通過cd 文件夾名稱，打開文件夾
  
• 最直接的方式是：在當(dāng)前要啟動服務(wù)的文件夾中shift+鼠標(biāo)右鍵，然后在此處打開命名終端或者powershell即可，如果兩種方式都不可用，則使用窗口鍵+r，輸入cmd,打開終端，默認(rèn)是c盤，切換其他盤，可輸入[盤名稱+冒號]，例如：d:,以這樣的形式即可以進(jìn)行盤的切換，重復(fù)上面的命令，打開到要啟動服務(wù)的文件夾即可
  
• mac只有一個(gè)盤，因此不需要上面的操作，只需要ls查看文件，cd 文件夾名稱，打開對對應(yīng)文件夾即可
  

• browser-sync start --server --files '文件名稱'
  
• 啟動服務(wù)來運(yùn)行要執(zhí)行的文件，實(shí)時(shí)監(jiān)聽


• browser-sync start --proxy "要監(jiān)聽的服務(wù)地址"
  
• 啟動服務(wù)，代理其他服務(wù)，實(shí)時(shí)監(jiān)聽

• vConsole
  
• 能夠在頁面中以懸浮窗的形式出現(xiàn)一個(gè)按鈕，涵蓋網(wǎng)絡(luò)請求和日志等，便于在移動端查看控制臺輸出信息
  
• cdn地址
  
• 
  
• 本地下載
  
• npm install vconsole
  
• 下載完成打開node_modules文件，找到dist文件，引入vconsole.min.js即可
  

• charles
  
• 抓包工具，當(dāng)前后端交互出現(xiàn)問題，用于抓取網(wǎng)路請求，進(jìn)行開發(fā)調(diào)試
  
• 官方下載地址: https://www.charlesproxy.com/,可前往官方地址下載，或上網(wǎng)上找破解版(可永久使用，沒有期限限制)
  
• 使用：
  
• window版： https://www.jianshu.com/p/6777a24c5ec2
  
• mac版：https://www.jianshu.com/p/e9a48b9fb7a3
  
• 注意
  
• 保證手機(jī)和電腦處于同一局域網(wǎng)下
  
• 配置手機(jī)上局域網(wǎng)的代理地址為電腦的ip地址
  
• mac查看ip
  
• 打開終端，輸入ifconfig


• window查看ip
  
• 打開終端，輸入ipconfig

• 電腦上需要安裝一份charles證書，并設(shè)置為受信任證書，手機(jī)上需要安裝證書，并設(shè)置為信任