小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
调试检查
模拟器可代替不了真机~ 起码肯定是模拟不出来刘海的~
所以呢~ 我们在制作网站的时候,可以把模拟器的状态作为参考,但是做完后,还是要通过真机检测,是否存在问题~ 那么如何检测把网站放到手机上进行检测呢?
检测步骤
-
下载
XAMPP
:sourceforge.net/projects/xa… 但是下载起来,特别慢,如果自己下载,推荐使用迅雷(我下载它告诉我要一天!!)XAMPP
是一个集成了很多功能的软件,这里我们使用Apache
模块,它是WEB服务器软件,功能是让别的设备在浏览器上输入它的地址时,它能把相应的网页文件、媒体文件发送给浏览器。(注意连接同一个网络)
-
安装:打开
-
找到
Apache
点击start
开启服务
注意:
有的可能在这一步会发生错误,下面会提示这样的文字。
-
一般来说,产生原因是端口为其他程序占用,修改下端口就好,修改端口:
httpd-ssl.conf 文件
所有 443 => 444(自定义端口)
httpd.conf 文件
所有 80=> 88(自定义端口)
关闭软件重新启动
-
找到防火墙,添加
Apache HTTP Server
允许使用专用 or 公用网络(否则还是会访问失败) -
保证 手机 和 电脑连接同一个网络
-
找到当前电脑
IP
地址
- 手机浏览器,输入
IP
地址 - 这时我们就可以访问到页面啦~ 如果想要访问到自己写的页面,做如下操作:
把你想要查看的页面放到htdocs
文件夹内,就可以看到啦~
这里为了给大家展示效果,我下载了一个投屏软件:
AirServer
但是对于大家开发来说,是没有什么实际用处的,所以并不需要下载,该软件针对苹果设备
调试辅助工具
vConsole
是一个可以帮助我们在手机上进行调试的工具,我们可以通过它看html的结构以及JS报错
等内容,使用方法如下:
-
下载
vConsole
,地址:raw.githubusercontent.com/Tencent/vCo… -
在需要使用的页面中,引入上面的
JS
文件 -
添加代码
var vConsole = new VConsole(); 复制代码
-
但是很可惜,没有办法看到元素的样式。
点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。
往期精彩推荐
Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM
Git 相关推荐
面试相关推荐
更多精彩详见:个人主页