调试经验

153 阅读1分钟

[TOC]

微信里访问页面出错,浏览器访问没错

在微信开发者工具中打开该链接,可以模拟微信访问链接

手机访问本地服务

设置 手机--无线局域网--选择链接的wifi--配置DNS--改为手动,添加本地机器的IP。

用手机访问本机IP加服务地址即可访问本地服务.

在页面中加调试工具

vConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板。

<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
    // init vConsole
    var vConsole = new VConsole();
    console.log('Hello world');
</script>

出错要看异常错误码, 302 Not Found 为请求链接未找到。会导致异常

苹果手机调试真机

手机和mac都打开Safari的开发选项.

mac Safari打开开发者选项: Safari偏好设置-> 高级 -> 在菜单中显示开发菜单 手机打开开发者选项:设置,Safari浏览器->高级(在最后)->网页检查器

用数据线链接到mac后,打开mac的Safari后,在菜单栏的开发,选择手机则可看到手机访问的网站列表。

如果无法打开,则是因为手机系统版本不是最新导致,可以用xcode的simulator新建一个模拟器,再用Safari审查元素即可。

mac Safari浏览器模拟iPhone手机访问,菜单栏-> 开发 -> 进入响应式设计模式