移动端调试工具及相关概念总结

时间：2023-05-31 05:54:02 | 来源：网站运营

时间：2023-05-31 05:54:02 来源：网站运营

第一单元(HTML5高级)

• pc端软件
  
• 如：photoshop、360、腾讯QQ、谷歌浏览器等


• 移动端app
  
• 如：手机版QQ、微信、360、美颜相机等

• 程序就是一段代码，一个功能，或者一个函数、一段逻辑，而软件就是由大大小小的程序文件通过文件夹归类整合组织在一起而形成的一个集合，我们每次安装软件都会选择安装位置，当我们查看安装位置的文件夹时，就会发现，软件其实就是由一个个文件、文件夹包含文件这样的形式存在的

• 目前市面上最常见的就是ios和android系统了，我们平时开发过程中只需要考虑安卓和ios就可以了

• 如何做出一款手机app呢？有以下三种方式！
  
• nativeapp(原生app)
  
• android(安卓)使用java或者c开发
  
• ios使用object-c或者Swift(苹果公司开发用于开发ios软件的编程语言和object-c差不多，只是入门门槛更低)或c进行开发
  


• webapp
  
• 简单来说就是触屏版的网页，使用html5开发，运行于手机浏览器中，无需安装和下载

• hybridapp(混合app)
  
• 外面是原生app的壳子，里面是webapp的应用，兼具两者优势，比如原生app可以操作系统，例如调起摄像头、闪光灯、重力感应、陀螺仪等等，但是原生app开发难度大，成本高，跨平台开发需要两套不同的原生代码，而使用原生的壳子，开发量大大减少，内置webapp，由于是网页语言，开发效率高，跨平台兼容性高，只需开发一套，套不同的壳子，通过应用商店分发即可

• navigator.userAgent
  
• 我们都知道通过这个属性我们能够在pc端查看浏览器的信息，版本号、内核等等，那么通过它也可以获取移动端设备的运行系统或者当前设备的大概分类，因此便可以做不同的兼容

• 一般当页面在本地调试没问题，当到测试环境、代理环境或者线上环境之后出现问题，用于页面元素审查，样式调整等
  
• 有线调试：
  
• 1.1、IOS 移动端 （Safari开发者工具）
  
• 手机端：设置 → Safari → 高级 → Web 检查器 → 开。
  
• mac端：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。
  在 OS X 中启动 Safari 之后，以 USB 电缆正常接入 iOS 设备，并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”，可以看到有 iOS 设备的名称显示，其子菜单项即为移动设备上 Safari 的所有标签页，点击任意一个开始调试。
  


• 1.2、xcode开发者工具调试
  
• 如果没有iOS设备，也可以在Xcode中模拟一台，点击顶部“Xcode”→“Open Developer Tool”→“iOS Simulator”即可打开一个iOS设备的模拟器，并且模拟器里面Safari打开的页面，也是能通过上个步骤中MAC上的Safari调试

• 2、安卓移动端（chrome://inspect）
  
• 首先确保手机上和PC机上装有最新版本的chrome浏览器，其次是将手机的开发者选项打开并允许调试，然后将数据线将两台设备连接起来。在PC机上打开chorme，输入chrome://inspect ，然后在手机上打开chrome，然后手机会弹框询问是否允许调试，点击确定，当手机锁屏未出现提示时，拔掉usb线重新插入。
  
• 点击inspect打开DevTools后，你可以选中页面中的DOM元素，同时设备中对应元素也高亮显示，也可使用DevTools中的Inspect Element 选中目标元素，可以实时与移动设备页面交互，方便的定位问题所在，进行代码调试，如果有问题，请检查chrome版本，如果调试页面发生空白，则进行翻墙代理，翻墙方法可在网上查找。
  

• browserSync
  
• 一款浏览器同步测试工具，可以在多端同时预览，方便开发者进行测试和解决兼容性问题
  
• 官网：http://www.browsersync.cn/
  
• 使用必要条件：
  
• 安装nodejs(基于chrome V8引擎(js引擎)开发的用于运行javascript的工具)
  
• windows系统
  
• 官网：http://nodejs.cn/
  
• 下载后，为一个安装包，解压一直next安装即可
  
• 默认安装到C盘一般不需要配置环境变量，其他盘需要配置
  


• mac下载安装包直接安装即可或者使用其他软件管理工具也可
  

• 使用node
  
• windows按住窗口键+r键打开搜索框，输入cmd,点击确定，即可打开终端 ，或者在具体文件夹中按住shift键+鼠标右键，点击右键菜单中的在此处打开命令窗口或者powershell即可，输入node -v，能够显示版本号，表示安装成功
  
• mac按住command + 空格键，打开搜索框，输入终端即可，打开，输入node -v，能够显示版本号，表示安装成功
  


• 安装browserSync
  
• npm install browser-sync -g 进行全局安装

• 必须在同一网络下，电脑连接手机热点也可以
  
• 启动browserSync后，移动端直接访问服务地址即可
  


• 启动服务示例及要求：
  
• 启动服务的位置必须保证和要监听的文件或文件夹在同一层级，因此，需要把终端中默认显示的目录位置切换到具体文件夹，通过ls查看当前目录下的所有文件信息，通过cd 文件夹名称，打开文件夹
  
• 最直接的方式是：在当前要启动服务的文件夹中shift+鼠标右键，然后在此处打开命名终端或者powershell即可，如果两种方式都不可用，则使用窗口键+r，输入cmd,打开终端，默认是c盘，切换其他盘，可输入[盘名称+冒号]，例如：d:,以这样的形式即可以进行盘的切换，重复上面的命令，打开到要启动服务的文件夹即可
  
• mac只有一个盘，因此不需要上面的操作，只需要ls查看文件，cd 文件夹名称，打开对对应文件夹即可
  

• browser-sync start --server --files '文件名称'
  
• 启动服务来运行要执行的文件，实时监听


• browser-sync start --proxy "要监听的服务地址"
  
• 启动服务，代理其他服务，实时监听

• vConsole
  
• 能够在页面中以悬浮窗的形式出现一个按钮，涵盖网络请求和日志等，便于在移动端查看控制台输出信息
  
• cdn地址
  
• 
  
• 本地下载
  
• npm install vconsole
  
• 下载完成打开node_modules文件，找到dist文件，引入vconsole.min.js即可
  

• charles
  
• 抓包工具，当前后端交互出现问题，用于抓取网路请求，进行开发调试
  
• 官方下载地址: https://www.charlesproxy.com/,可前往官方地址下载，或上网上找破解版(可永久使用，没有期限限制)
  
• 使用：
  
• window版： https://www.jianshu.com/p/6777a24c5ec2
  
• mac版：https://www.jianshu.com/p/e9a48b9fb7a3
  
• 注意
  
• 保证手机和电脑处于同一局域网下
  
• 配置手机上局域网的代理地址为电脑的ip地址
  
• mac查看ip
  
• 打开终端，输入ifconfig


• window查看ip
  
• 打开终端，输入ipconfig

• 电脑上需要安装一份charles证书，并设置为受信任证书，手机上需要安装证书，并设置为信任