(window.webpackJsonp=window.webpackJsonp||[]).push([[89],{412:function(e,t,s){"use strict";s.r(t);var a=s(17),_=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"调试方法"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#调试方法"}},[e._v("#")]),e._v(" 调试方法")]),e._v(" "),t("h2",{attrs:{id:"h5平台调试"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#h5平台调试"}},[e._v("#")]),e._v(" H5平台调试")]),e._v(" "),t("ol",[t("li",[e._v("启动h5平台")])]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[e._v("    "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("yarn")]),e._v(" serve\n")])])]),t("ol",{attrs:{start:"2"}},[t("li",[e._v("启动后IDE下方终端会显示出访问IP和端口")])]),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/shell.png")}}),e._v(" "),t("ol",{attrs:{start:"3"}},[t("li",[e._v("点击终端中的IP 或在浏览器中输入地址 ，即可在浏览器中预览")])]),e._v(" "),t("h2",{attrs:{id:"yump-app专用-app平台调试"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#yump-app专用-app平台调试"}},[e._v("#")]),e._v(" YUMP app专用-APP平台调试")]),e._v(" "),t("ol",[t("li",[e._v("下载安装宇信移动平台APP（调试版)，用于调试APP工程；")]),e._v(" "),t("li",[e._v("将需要调试使用的移动设备和pc设备连至同一局域网(wifi)或者pc设备连接手机热点。")]),e._v(" "),t("li",[e._v("启动APP平台"),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[e._v("    "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("yarn")]),e._v(" serve\n")])])])]),e._v(" "),t("li",[e._v("启动后IDE下方终端会显示出访问IP和端口")])]),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/shell.png")}}),e._v(" "),t("ol",{attrs:{start:"5"}},[t("li",[e._v("打开宇信移动平台APP（调试版）")])]),e._v(" "),t("p",[e._v("ios系统App：在手机桌面上，长按"),t("code",[e._v("宇信移动平台")]),e._v("APP，在弹出的菜单中，选择"),t("code",[e._v("扫一扫")]),e._v(",在打开的页面中输入"),t("code",[e._v("终端中的IP")]),e._v("即可在外壳中预览页面。")]),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/IOS_debug_1.jpg"),width:"400px"}}),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/IOS_debug_2.jpg"),width:"400px"}}),e._v(" "),t("p",[e._v("补充： "),t("code",[e._v("3.5.1版本后")]),e._v("，ios系统App新增"),t("code",[e._v("开发助手")]),e._v("功能，点击进入"),t("code",[e._v("开发助手")]),e._v("，可以通过"),t("code",[e._v("Web—任意门")]),e._v("的方式选择输入"),t("code",[e._v("终端中的IP")]),e._v("或者扫码的方式在外壳中预览页面")]),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/IOS_debug_3.jpg"),width:"400px"}}),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/IOS_debug_4.jpg"),width:"400px"}}),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/IOS_debug_5.jpg"),width:"400px"}}),e._v(" "),t("p",[e._v("android:android系统APP:打开app，"),t("code",[e._v("摇一摇")]),e._v("手机，在弹出的窗口中调试路径输入地址，访问地址即可预览页面.")]),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/android_1.jpg"),width:"400px"}}),e._v(" "),t("p",[e._v("补充： "),t("code",[e._v("3.5.1版本后")]),e._v("，android系统APP新增"),t("code",[e._v("开发助手")]),e._v("功能，点击进入"),t("code",[e._v("开发助手")]),e._v("，可以通过"),t("code",[e._v("Web—任意门")]),e._v("的方式选择输入"),t("code",[e._v("终端中的IP")]),e._v("或者扫码的方式在外壳中预览页面\n"),t("img",{attrs:{src:e.$withBase("/images/guide/android_2.jpg"),width:"400px"}}),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/android_4.jpg"),width:"400px"}}),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/android_3.jpg"),width:"400px"}})]),e._v(" "),t("h2",{attrs:{id:"通用-移动端真机调试"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#通用-移动端真机调试"}},[e._v("#")]),e._v(" 通用-移动端真机调试")]),e._v(" "),t("h3",{attrs:{id:"前言"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#前言"}},[e._v("#")]),e._v(" 前言")]),e._v(" "),t("p",[e._v("移动端页面调试一直是头疼的问题，"),t("code",[e._v("iOS")]),e._v("由于其封闭的特性和整体较高的性能，整体适配相对好做，调试也因为 "),t("code",[e._v("safari")]),e._v(" 的打通变得很方便。而 "),t("code",[e._v("Android")]),e._v("系统，由于版本跨度大，且各家厂商采用自研内核，使得其成为移动端页面问题出现的主要平台。工程师们采用了各种各样的方式来对其进行调试：alert 大法，页面引入或注入VConsole开启移动端控制台，抓包等调试方式，其实我们只需要做一点微小的工作，就可以使用我们熟悉的 "),t("code",[e._v("Chrome")]),e._v(" 开发者工具（需要翻墙） "),t("code",[e._v("edge")]),e._v(" 开发者工具对移动端页面进行调试，这里推荐"),t("code",[e._v("edge")]),e._v(" 开发者工具。")]),e._v(" "),t("h3",{attrs:{id:"安卓系统下的h5真机联调"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#安卓系统下的h5真机联调"}},[e._v("#")]),e._v(" 安卓系统下的h5真机联调")]),e._v(" "),t("h4",{attrs:{id:"准备工作"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#准备工作"}},[e._v("#")]),e._v(" 准备工作")]),e._v(" "),t("ul",[t("li",[t("code",[e._v("edge")]),e._v("等基于原生 Chromium 内核的浏览器")]),e._v(" "),t("li",[e._v("App 内嵌 Webview使用")]),e._v(" "),t("li",[e._v("Android系统的移动设备")]),e._v(" "),t("li",[e._v("Android系统的移动设备数据线")]),e._v(" "),t("li",[e._v("如果是本地项目联调，需要保证移动设备需与PC设备处于同一网段")])]),e._v(" "),t("h4",{attrs:{id:"edge-浏览器-inspect-调试"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#edge-浏览器-inspect-调试"}},[e._v("#")]),e._v(" edge 浏览器 Inspect 调试")]),e._v(" "),t("h5",{attrs:{id:"第一步-开启-edge-浏览器-inspect-调试"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#第一步-开启-edge-浏览器-inspect-调试"}},[e._v("#")]),e._v(" 第一步：开启 edge 浏览器 Inspect 调试")]),e._v(" "),t("p",[e._v("在 edge 浏览器地址栏中输入 edge://inspect/#devices 并回车，就可以打开 Inspect 调试界面，此时我们勾选 "),t("code",[e._v("Discover USB devices")]),e._v(" 选项便可以看到设备列表。")]),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/debug1.jpg"),alt:"debug1"}}),e._v(" "),t("h5",{attrs:{id:"第二步-然后打开手机中开发者选项并打开usb-调试开关"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#第二步-然后打开手机中开发者选项并打开usb-调试开关"}},[e._v("#")]),e._v(" 第二步：然后打开手机中开发者选项并打开"),t("code",[e._v("USB 调试开关")])]),e._v(" "),t("p",[e._v("具体方法自行百度，不同手机有一定区别。以华为手机为例：设置->关于手机->在版本号上连续多点几次，直到出现允许开发人员选项的提示；->再次回到设置菜单，点开发人员选项->在出现的允许开发设置对话框中按确定；->在开发人员选项中点USB调试；->在弹出的是否允许USB调试对话框中按确定，即可打开手机调试模式。使用数据线将手机连接到电脑上，我们就可以在设备列表中看到自己的设备。")]),e._v(" "),t("h5",{attrs:{id:"第三步-访问手机中我们想要调试的页面-第一步inspect页面中便会移动设备打开的页面。"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#第三步-访问手机中我们想要调试的页面-第一步inspect页面中便会移动设备打开的页面。"}},[e._v("#")]),e._v(" 第三步：访问手机中我们想要调试的页面，第一步inspect页面中便会移动设备打开的页面。")]),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/debug2.jpg"),alt:"debug2"}}),e._v(" "),t("h5",{attrs:{id:"第四步-点击对应页面的-inspect选项-即可打开edge调试工具"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#第四步-点击对应页面的-inspect选项-即可打开edge调试工具"}},[e._v("#")]),e._v(" 第四步：点击对应页面的 "),t("code",[e._v("inspect")]),e._v("选项，即可打开edge调试工具")]),e._v(" "),t("p",[e._v("接下来你便可以和调试 PC 界面一样通过 edge 进行你所需要的调试，你在手机上的操作会始终保持同步到左侧屏幕上。")]),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/debug3.jpg"),alt:"debug3"}}),e._v(" "),t("h3",{attrs:{id:"ios系统下的h5真机联调"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ios系统下的h5真机联调"}},[e._v("#")]),e._v(" iOS系统下的h5真机联调")]),e._v(" "),t("h5",{attrs:{id:"该解决方案底层机制由苹果官方提供-以下提供一些开发者整理的最佳实践"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#该解决方案底层机制由苹果官方提供-以下提供一些开发者整理的最佳实践"}},[e._v("#")]),e._v(" 该解决方案底层机制由苹果官方提供，以下提供一些开发者整理的最佳实践")]),e._v(" "),t("ul",[t("li",[t("p",[e._v("H5页面调试-iOS真机基础教程-版本1"),t("a",{attrs:{href:"https://zhuanlan.zhihu.com/p/657339960?utm_id=0",target:"_blank",rel:"noopener noreferrer"}},[e._v("点击访问"),t("OutboundLink")],1),e._v(";")])]),e._v(" "),t("li",[t("p",[e._v("H5页面调试-iOS真机基础教程-版本2"),t("a",{attrs:{href:"https://blog.csdn.net/qq_14854339/article/details/137517286",target:"_blank",rel:"noopener noreferrer"}},[e._v("点击访问"),t("OutboundLink")],1),e._v(";")])])]),e._v(" "),t("h2",{attrs:{id:"vconsole调试工具"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vconsole调试工具"}},[e._v("#")]),e._v(" vConsole调试工具")]),e._v(" "),t("p",[t("code",[e._v("vConsole")]),e._v("是一个轻量级、可扩展的移动网页前端开发工具，可"),t("code",[e._v("查看控制台日志")]),e._v(", "),t("code",[e._v("查看网络请求")]),e._v(", "),t("code",[e._v("查看文件元素")]),e._v("等，项目中开发模式默认使用该插件。")]),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/vConsole1.png"),width:"400px"}}),e._v(" "),t("img",{attrs:{src:e.$withBase("/images/guide/vConsole2.jpg"),width:"400px"}})])}),[],!1,null,null,null);t.default=_.exports}}]);