移动端

跨平台调试

• Vconsole

• Eruda

• window下调试 iOS-Safari

  实现真机调试主要是使用了 remotedebug-ios-webkit-adapter

  安装scoopeWindows 命令行安装工具
  
  Set-ExecutionPolicy RemoteSigned -scope CurrentUser
  iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

  scoop bucket add extras
  scoop install ios-webkit-debug-proxy
  npm install -g vs-libimobile
  
  npm install remotedebug-ios-webkit-adapter -g

  1. 进入 iPhone 中的 设置 > Safari 浏览器 > 高级 > Web 检查器，开启该选项。
  2. 打开 iTunes 并连接 iPhone，在 iPhone 弹框中选择信任该电脑。
  3. 打开命令行，执行以下命令，启动适配器：

  remotedebug_ios_webkit_adapter --port=9000

  1. 在 iPhone 中打开 Safari 浏览器，打开待调试页面。
  2. 打开 Chrome 浏览器，进入 chrome://inspect/#devices 页面，在 Discover network targets 选项添加 localhost:9000 配置。刷新页面，这时页面中会出现 'Remote Target' 列表，该列表展示了 iPhone 中打开的页面，点击 inspect，即可进行调试。（科学上网/edge）

h5键盘输入遮挡问题

处理方式有 scrollIntoView /scrollTop，原生键盘安卓、safari适用，ios中可能有bug，后续待更新，以下为使用vant为例：

整体思路：由于键盘控件定位语底部，用innerHeight ,getBoundingClientRect()计算输入DOM节点与视口底部的距离，小于键盘高度则需要显示，结合scrollTop按需来滚动，其中需要动态添加键盘占位空元素（高度与控件保持一致，需结合布局灵活计算），撑起滚动底部区域，此方案兼容性较好

<div v-if="showKeyboard" class="empty-keyboard"></div>

const scrollArea = document.querySelector('.scroll-l'); const arrBottom =
window.innerHeight - e.target.getBoundingClientRect().y -
e.target.getBoundingClientRect().height; if (arrBottom < 260) { nextTick(() => {
scrollArea.scrollTop += 260 - arrBottom; }); }