浏览器打开开发者工具(F12),或者用微信开发者工具

断点调试

1.点击sources-》需要调试的js页面

点击行号来设置断点,再次点击取消断点

ajax接口,js浏览器断点调试_数据

2.点击页面登录按钮,函数开始执行,点击右侧蓝色三角符号进入下一断点

如此便可一行行进行bug调试

ajax接口,js浏览器断点调试_浏览器调试_02

 断点执行结果及服务器返回的数据如下图所示

ajax接口,js浏览器断点调试_js断点调试_03

2.查看ajax请求

点击network -》headers 查看请求信息,form data 为提交的数据

XHR 过滤出ajax请求

ajax接口,js浏览器断点调试_bug调试_04

preview,response为服务器返回信息

ajax接口,js浏览器断点调试_浏览器调试_05

application 记录了当前域名的cookie,本地存储等数据

ajax接口,js浏览器断点调试_ajax_06