zoukankan      html  css  js  c++  java
  • 移动端开发基础【17】浏览器调试

    一.使用HBuilderX内置浏览器调试H5

    1.内置浏览器的用法:

    使用HBuilderX打开 uni-app 项目的页面,点击HBuilderX右上角的预览按钮,就可以在内置浏览器里面打开H5运行结果,也可以点右键打开控制台调试。

    在页面上修改源码,点击保存之后,右边的浏览器内容可以自动刷新。

    查看日志:在HBuilderX控制台里,可以直接看到内置浏览器打印的日志。

    断点调试:打开内置浏览器的控制台的 Sources 栏,可以给 js 打断点调试。

    在 Network 下找到 webpack 里的工程目录,可直接找到对应的vue页面进行断点调试;或按 Ctrl+P搜文件名,进入页面调试;也可点击控制台的 log 信息,进入对应的页面进行调试。

    (1)第一截图:快捷键和源码的位置

     

    (2)第二个截图:断点调试

     

    2. 内置浏览器新增功能

    HBuilderX 2.6.10+版本,内置浏览器 增加 “查找代码中对应的DOM节点” 和 “高亮浏览器内对应元素” 功能

    (1)在内置浏览器,右键菜单,点击查找代码中对应的DOM节点,即可跳转到编辑器相应位置

    (2)在编辑器内,右键菜单,点击高亮浏览器内对应元素, 即可在内置浏览器显示相应元素

    二.使用HBuilderX在其他浏览器上调试H5

    使用HBuilderX打开 要调试uni-app 项目,点击工具栏的运行 -> 运行到浏览器 -> 选择 Chrome,或者其他的浏览器。

     

    它的日志的显示和调试与HBuilderX内置浏览器的相同。

    官网:http://www.lenbor.com
  • 相关阅读:
    excel 批量修改sql
    js select 改变当前选中option
    servlet 显示服务器上的图片
    @Security权限验证拦截参数
    签字 变成 图片 纯js+html实现
    web 的项目 搭乘war包,运行时候却找不到jar包
    jquery监听扫码枪获得值
    妹子的js 万一哪一天资源找不到了 记录下来
    react系列---【redux安装、创建仓库】
    react系列---【redux进阶】
  • 原文地址:https://www.cnblogs.com/lenbor/p/13468509.html
Copyright © 2011-2022 走看看