背景
大學畢業快要一年了,用leader的話說我也是有一年開發經驗的前端開發工程師了,輸出是檢驗輸入的最好方法,那我就慢慢來總結這一年來在工作中總結的經驗教訓,分享給大家,有不專業和不完善的地方,請大家多多指點反饋,比心~
做過一段時間的運營需求,一些主要在手機上瀏覽的頁面,遇到的最大問題是除錯的問題:
本文將介紹一些可用的本地開發除錯方法,提高你的開發效率,嘿哈~。
需求:難點:
1.通過chrome除錯安卓機上的h5頁面
解決方案:
(1)安裝chrome 32或者之後的版本
(2)使用usb線將安卓機和mac連線起來
(3)開啟 usb 除錯選項
在安卓裝置上，進入設定》開發者選項》開啟usb除錯 (注意：在安卓 4.2 及以後的版本中，預設情況下開發者選項是隱藏的。要啟用開發者選項，選擇設定》關於手機然後點選版本號7次。)。
(5)在你的裝置上，開啟要瀏覽的頁面,會跳出乙個彈框，詢問你是否要允許在電腦端進行usb除錯。選擇確定。
(6)點選chrome://inspect/#devices 頁面上的inspect便可以審查安卓機上的h5頁面的元素了
2.通過safari除錯iphone上的h5頁面
解決辦法:
(1)執行safari,點選「safari」選單下面的「偏好設定（preferences…）」，切換到「高階選項（advanced）」：
(2)勾選「在選單欄顯示」開發」選單（showdevelop menu in menu bar）」，關閉偏好設定。此時在safari的工具欄出現「開發（develop）」選單：
(3)使用usb線將iphone和mac連線起來
(4)在iphonesafari開啟要除錯的h5頁面,便可以除錯了
需求:難點:
(1)必須在*.signature.cn環境下進行除錯,否則無法訪問用來簽名的服務
(2)io.signature.cn服務使用https協議通訊,中間難以通過**攔截
解決辦法(適用於mac):
(3)開啟charles，按如圖所示方式安裝根證書
(4)在proxy -> ssl proxying settings 中，加入 *.signature.cn 網域名稱
(5)在tools -> map local 功能中，加入需要**到本地的線上 url 到 本地資料夾的對應關係
H5頁面測試總結
其實經過幾次h5頁面測試之後，發現存在很多共同的問題，所以在此對h5頁面的測試點 以及容易出問題的點 做乙個總結，給開發同學自測，以及準備入手h5測試的同學乙個參考。1 業務邏輯相關 之外，h5頁面的測試，需要關注以下幾點 1.1 登陸 1.2 翻頁 1.3 重新整理與返回 1.4 mtop介面返回...
h5頁面開發
相信大家在做h5頁面開發的時候，也會遇到一些問題。筆者將h5開發過程中常見的一些問題和解決辦法列舉出來，有需要的朋友可以參考一下。1.安卓瀏覽器看背景，有些裝置會模糊。同等比例的在pc端頁面和移動手機端頁面的解析度差很多，原因和devicepixelratio有關。手機解析度比pc端的解析度小，按照...
vuejs開發H5頁面總結
vuejs開發h5頁面總結 關於布局方案 當拿到設計師給的ui設計圖，前端的首要任務就是布局和樣式，相信這對於大部分前端工程師來說已經不是什麼難題了。移動端的布局相對pc較為簡單，關鍵在於對不同裝置的適配。之前介紹了一篇關於移動端rem布局方案，這大致是網易h5的適配方案。不過實踐中發現 開源的可伸...