使用Hbuilder编辑器进行移动端页面调试

最新推荐文章于 2024-07-29 17:02:03 发布

884891225

最新推荐文章于 2024-07-29 17:02:03 发布

阅读量1.8w

点赞数

分类专栏：前端移动开发文章标签：移动调试编辑器

本文链接：https://blog.csdn.net/u014046533/article/details/77429521

版权

前端移动开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：之前调试测试移动页面，用的Wampserver集成的服务器软件，
需要在修改apache的配置文件，用起来还需要要另外开启这个服务器，稍微麻烦了些，后来同事介绍了这个方法觉的不错，分享下。

打开Hbuilder 里的工具栏下的“边看边改模式”下方有个二维码

2.设置内置web服务器的IP地址为自己电脑的地址，以及端口号，确保端口号不冲突

这里写图片描述

用手机扫描二维码便可以在手机端查看页面

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

884891225

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

hbuilderx简单网页代码_使用Hbuilderx 写一个极简酷酷的手机桌面

weixin_39684995的博客

11-23

3228

如题，由于受到相应类别的软件的启发，故此书写一个简单实用的手机桌面，熟悉下代码效果图，楼主个人原因，软件列表做了虚化处理代码部分<template>//页面的渲染列表的代码部分<view class="bgColor"><view style="display: inline;line-height: 26px;" v-for="(item, index) ...

移动端开发调试大法

yulin009的博客

12-25

322

移动端开发调试的几种方式，各有优缺点一、Chrome DevTools模拟手机调试二、谷歌浏览器自带的Inspect检查器三、插件调试VConsoleweinreEruda使用HBuilderX编辑器（个人推荐）功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定...

1 条评论您还未登录，请先登录后发表或查看评论

HBuilderX的uniapp项目APP之Webview调试（像开发网页一样开发APP）

qq_46141063的博客

01-12

2515

关于uniapp项目APP之Webview调试的详解，有图有真相，不会你K我！

HBuilder如何无线连接 Android手机进行代码调试

07-29

518

HBuilder 是一款专为前端开发设计的集成开发环境 (IDE)，支持多种语言，包括 HTML、CSS、JavaScript 等。

HbuilderX中华为手机真机调试

Gblfy_Blog

05-28

4513

文章目录一、场景浮现1. 真机运行2. 问题描述二、解决方案2.1. 终端设置2.2. 开启开发者模式2.3. 开启USB调试2.4. 连接模式选择2.5. 重新运行2.6. 选择设备2.7. 手机真机调试一、场景浮现 1. 真机运行直接运行Hbuilder中的“运行”，无法显示对应设备 2. 问题描述二、解决方案 2.1. 终端设置 2.2. 开启开发者模式进入手机打开设置=》关于手机，不停点击版本号，直到提示，已开启开发者模式 2.3. 开启USB调试在设置里搜索开发人员选项。打开

HBuilder X 通过USB连接 Android手机进行代码调试

u010822903的博客

03-13

2292

HBuilder X 无线连接 Android手机进行代码调试-CSDN博客。

HBuilder开发MUI web app溢出页面上下无法滚动问题

dianshe9581的博客

07-19

510

因为没有对页面初始化，所以页面溢出部分不会显示，要解决此问题需要加上下面代码： JS代码： (function($){$(".mui-scroll-wrapper").scroll({bounce: false,//滚动条是否有弹力默认是trueindicators: false, //是否显示滚动条,默认是true});})(mui); 转载于:https://www.cnblo...

HBuilder使用之通过扫描二维码浏览本地静态页面

11-14

使用HBuilder的二维码预览功能可以在无需上传服务器的情况下快速地在手机上查看页面效果，这对于快速迭代和调试非常有帮助。 #### 知识点三：如何通过HBuilder生成二维码预览静态页面 1. **安装并启动HBuilder**：...

从小白到入门的 HBuilderX 使用指南

03-18

- 设备模拟：HBuilderX内置多种设备模型，方便移动端页面的预览和调试。 6. **调试工具** - 调试器：对于Vue.js项目，HBuilderX提供Vue DevTools，便于调试组件和数据。 - 日志查看：使用`console.log()`打印...

使用hbuilderx进行前端开发的最佳实践

使用HBuilderX进行前端开发的最佳实践 ## 第一章：HBuilderX简介 HBuilderX是一个强大的前端开发工具，提供了丰富的功能和工具，使开发人员能够高效地编写和调试前端代码。下面将介绍HBuilderX的主要特点： ### ...

前端框架编写器HBuilder

12-11

2. **实时预览**：HBuilder内置了浏览器预览功能，可以在编辑器内实时查看代码效果，方便开发者快速调试和优化界面。 3. **代码格式化**：自动代码格式化功能使得代码保持统一的风格，提高了代码可读性，也便于团队...

HbuilderX安装后打开，显示不全且无法拖动

梦凝哲雪

09-04

3650

HBuilder X 使用标准或开发板安装完后打开，选项栏目显示不全，且无法拖动效果如图解决方案使用快捷键最大化，win + ^ (向上方向键) 选项卡可以显示并可以拖动

HBuilderX运行真实手机教程(安卓)

为千万同胞少走弯路而写文！！！

05-17

1207

uni-app项目，HBuilderX运行安卓真实手机教程，华为荣耀10示例！

HbuilderX 安装后显示不全，无法拖动如何解决

weixin_38779534的博客

08-31

1143

这一下把我给看懵了，怎么拖也拖不动，连个关闭按钮也看不到，关了重启，卸载重装，关机重启，都不行，都这个样子，这不就逼死一个强迫症了吗终于在社区看到有别的小朋友也被坑了，然后大佬的回答，天呐。。。这可是2021年啊，现在还没有解决，也是绝了。。。。这不才像个人样吗。。。。。 ...

hbuilder设置html浏览器打开,HBuilder X如何配置浏览器操作配置方法

热门推荐

weixin_33941859的博客

06-09

1万+

HBuilder X是一个支持HTML5的网络开发工具。它不仅可以在浏览器中运行创建的HTML文件，还可以配置相关参数。让我们和边肖一起学习以下具体步骤。HBuilderX类别:编程工具大小:17.21米语言:简体中文分数:6下载地址配置浏览器:1。在浏览器中打开菜单栏-工具-选项2.点击选项选择一般，点击网页浏览器，我们以前使用的浏览器会显示出来，但版本很旧。如果我们想配置一个新的浏览器，我们必...

HBuilder项目运行至手机，在手机上查看效果（usb连接线）

m0_69848498的博客

04-23

943

HBuilder想要在手机上查看效果，运行至手机，很简单，usb连接线

使用HBuilder X 开发移动端

枫叶

05-16

2755

一、运行程序 1、mobile-uniapp 在HBuilder X编辑器如何运行在编辑器中直接连接svn，down代码也行，本地小乌龟拉下来导入编辑器也行设置你的微信开发工具安装目录，方便使用微信小程序运行移动端 1、设置微信appid 2、设置完成以后点击运行微信开发者工具，当前编辑器会自动编译项目，编译成功后会调起微信开发工具 3、需要注意的是如果在编译阶段报错需要打开微信开发者工具把这个选上 4、这个就是咱们移动端的样式了，微信开发者工具需要注册登录，我没有注册开发者，appid使用的是

hbiulder x 浏览器不显示_HBuilder X怎么配置浏览器 HBuilder X配置浏览器方法

weixin_39675963的博客

12-20

1万+

HBuilder X怎么配置浏览器呢，话说不少用户都在咨询这个问题呢?下面就来小编这里看下HBuilderX配置浏览器方法步骤吧，需要的朋友可以参考下哦。HBuilder X怎么配置浏览器 HBuilder X配置浏览器方法1、打开HBuilder中的菜单栏 --> 工具 -->选项2、点击选项选择常规，点击Web浏览器，会显示出我们以前使用的浏览器，但是版本已经很旧了，我们如果想要配...

关于HBuilder边改边看模式下中文乱码的一个问题

qq_40956679的博客

07-23

4928

各位大佬别笑。。简单的第一个html文件： <!DOCTYPE html> <html> <head> <meta charset="UTF - 8"> <title>用户注册</title> </head> <body> <fo

hbuilderx使用uniapp移动端腾讯地图导航代码

05-17

以下是使用uniapp和腾讯地图SDK进行导航的示例代码： 1. 在HBuilderX中创建一个uniapp项目。 2. 在项目根目录下的manifest.json文件中添加以下权限： ```json "app-plus": { "modules": { "tencentMap": { "useNative": true } } }, ``` 3. 在HBuilderX中打开插件市场，搜索并安装tencentMap插件。 4. 在需要使用地图导航的页面中引入tencentMap插件： ```javascript import tencentMap from '@/uni_modules/tencentMap/js_sdk/tencentMap'; ``` 5. 在导航按钮的点击事件中添加以下代码： ```javascript let plugin = requirePlugin('tencentMap'); let key = '你的腾讯地图key'; // 请替换为你自己的key let referer = 'uniapp-demo'; // 请替换为你自己的应用名称 let endPoint = JSON.stringify({ // 导航终点 'name': '终点名称', 'latitude': 终点纬度, 'longitude': 终点经度 }); let mode = 'driving'; // 导航模式，可以选取 walking, bicycling, driving let url = 'https://apis.map.qq.com/tools/routeplan/' + '?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&mode=' + mode; uni.navigateTo({ url: '/pages/webview/webview?url=' + encodeURIComponent(url) }) ``` 6. 在需要打开webview的页面中创建一个webview组件，用于显示地图导航页面： ```html <template> <view> <web-view :src="url"/> </view> </template> <script> export default { props: ['url'] } </script> ``` 7. 最后，你需要在腾讯地图开放平台上申请一个key，并将其替换为代码中的key。同时，你还需要在应用的开发者中心中设置referer。