小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ，赢取创作大礼包，挑战创作激励金

调试检查

模拟器可代替不了真机~ 起码肯定是模拟不出来刘海的~

所以呢~ 我们在制作网站的时候，可以把模拟器的状态作为参考，但是做完后，还是要通过真机检测，是否存在问题~ 那么如何检测把网站放到手机上进行检测呢？

检测步骤

0. 下载XAMPP：sourceforge.net/projects/xa… 但是下载起来，特别慢，如果自己下载，推荐使用迅雷（我下载它告诉我要一天！！）

   XAMPP是一个集成了很多功能的软件，这里我们使用Apache模块，它是WEB服务器软件，功能是让别的设备在浏览器上输入它的地址时，它能把相应的网页文件、媒体文件发送给浏览器。（注意连接同一个网络）

1. 安装：打开

2. 找到Apache点击start开启服务

   

注意：

有的可能在这一步会发生错误，下面会提示这样的文字。

0. 一般来说，产生原因是端口为其他程序占用，修改下端口就好，修改端口：

   httpd-ssl.conf 文件

   所有 443 => 444（自定义端口）

   httpd.conf 文件

   所有 80=> 88（自定义端口）

   关闭软件重新启动

1. 找到防火墙，添加Apache HTTP Server允许使用专用 or 公用网络（否则还是会访问失败）

2. 保证 手机 和 电脑连接同一个网络

3. 找到当前电脑IP地址

0. 手机浏览器，输入IP地址
1. 这时我们就可以访问到页面啦~ 如果想要访问到自己写的页面，做如下操作：

把你想要查看的页面放到htdocs文件夹内，就可以看到啦~

这里为了给大家展示效果，我下载了一个投屏软件：AirServer

但是对于大家开发来说，是没有什么实际用处的，所以并不需要下载，该软件针对苹果设备

调试辅助工具

vConsole是一个可以帮助我们在手机上进行调试的工具，我们可以通过它看html的结构以及JS报错等内容，使用方法如下：

0. 下载vConsole，地址：raw.githubusercontent.com/Tencent/vCo…

1. 在需要使用的页面中，引入上面的JS文件

2. 添加代码

   var vConsole = new VConsole();
   

3. 但是很可惜，没有办法看到元素的样式。

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期精彩推荐

前端常用的几种加密方法

canvas 爬坑路【方法篇】

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见：个人主页