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
  • 相关阅读:
    【USACO】又买饲料 单调队列dp
    数论:px+py 不能表示的最大数为pq-p-q的证明
    codeforces round #419 E. Karen and Supermarket
    [USACO4.1]麦香牛块Beef McNuggets
    【USACO】 录制唱片
    【USACO】 洞穴奶牛
    【USACO】奶牛抗议 树状数组+dp
    【USACO】 奶牛会展
    【LSGDOJ 2015】数页码
    阿里云合作伙伴峰会SaaS加速器专场 | 商业加持,迈进亿元俱乐部
  • 原文地址:https://www.cnblogs.com/lenbor/p/13468509.html
Copyright © 2011-2022 走看看