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
  • 相关阅读:
    【MVC 1】MVC+EF实体框架—原理解析
    数据结构导论(一)
    【JavaScript 14—学习总结】:从小事做起
    【JavaScript 13—应用总结】:锁屏遮罩
    【JavaScript 12—应用总结】:弹出登录框
    【JavaScript 11—应用总结】:下拉菜单
    【JavaScript 10—应用总结】:连缀
    【EF 1】EF实体框架 原理+实例
    【多 线 程】
    【命 令 行】
  • 原文地址:https://www.cnblogs.com/lenbor/p/13468509.html
Copyright © 2011-2022 走看看