【前端】调试技巧

建议使用火狐浏览器

请求抓取

复制请求，然后到控制台上运行，最后到【网络】查看刚刚运行的请求结果

非常好用

还可以复制其他值，自己可以多尝试一下

await fetch("https://mcs.zijieapi.com/list", {
    "credentials": "omit",
    "headers": {
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0",
        "Accept": "*/*",
        "Accept-Language": "zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2",
        "Content-Type": "application/json; charset=utf-8",
        "Sec-Fetch-Dest": "empty",
        "Sec-Fetch-Mode": "cors",
        "Sec-Fetch-Site": "cross-site"
    },
    "referrer": "https://www.toutiao.com/",
    "body": "[{\"events\":[{\"event\":\"rt_share_to_platform\",\"params\":\"{\\\"url\\\":\\\"https://www.toutiao.com/w/1752018689523719\\\",\\\"screen_width\\\":1493,\\\"screen_height\\\":933,\\\"screen_inner_width\\\":1493,\\\"screen_inner_height\\\":781,\\\"category_name\\\":\\\"\\\",\\\"enter_from\\\":\\\"\\\",\\\"page_name\\\":\\\"weitoutiao_detail\\\",\\\"group_type\\\":\\\"weitoutiao\\\",\\\"group_id\\\":\\\"1752018689523719\\\",\\\"author_id\\\":\\\"109873255271\\\",\\\"position\\\":\\\"detail\\\",\\\"group_source\\\":5,\\\"article_type\\\":\\\"wtt\\\",\\\"is_top_content\\\":\\\"0\\\",\\\"show_rank\\\":0,\\\"section\\\":\\\"content_detail\\\",\\\"share_platform\\\":\\\"copy\\\",\\\"event_index\\\":1673618764671}\",\"local_time_ms\":1673618574107,\"is_bav\":1,\"session_id\":\"9c34faff-2e55-4d96-94b4-2295c417664e\"},{\"event\":\"__bav_click\",\"params\":\"{\\\"url\\\":\\\"https://www.toutiao.com/w/1752018689523719\\\",\\\"screen_width\\\":1493,\\\"screen_height\\\":933,\\\"screen_inner_width\\\":1493,\\\"screen_inner_height\\\":781,\\\"element_path\\\":\\\"/body/div/div/div/div/div/div/div/div/ul/li[]/div\\\",\\\"positions\\\":[\\\"0\\\",\\\"0\\\",\\\"1\\\",\\\"0\\\",\\\"0\\\",\\\"1\\\",\\\"0\\\",\\\"4\\\",\\\"0\\\",\\\"0\\\",\\\"1\\\",\\\"0\\\"],\\\"texts\\\":[\\\"复制链接\\\"],\\\"element_title\\\":\\\"复制链接\\\",\\\"element_id\\\":\\\"\\\",\\\"element_class_name\\\":\\\"ttp-interact-item copy icon-copy\\\",\\\"element_type\\\":1,\\\"element_width\\\":170,\\\"element_height\\\":40,\\\"touch_x\\\":40,\\\"touch_y\\\":23,\\\"page_manual_key\\\":\\\"\\\",\\\"elememt_manual_key\\\":\\\"\\\",\\\"since_page_start_ms\\\":69032,\\\"page_start_ms\\\":1673618505072,\\\"page_path\\\":\\\"/w/1752018689523719\\\",\\\"page_host\\\":\\\"www.toutiao.com\\\",\\\"is_html\\\":1,\\\"page_key\\\":\\\"https://www.toutiao.com/w/1752018689523719\\\",\\\"page_title\\\":\\\"令人心动的全新缤智_种花家的飞毛腿_2022年12月20日_微头条-今日头条\\\",\\\"event_index\\\":1673618764670}\",\"local_time_ms\":1673618574104,\"is_bav\":1,\"session_id\":\"9c34faff-2e55-4d96-94b4-2295c417664e\"}],\"user\":{\"user_unique_id\":\"7167738095474853383\",\"user_type\":12,\"user_id\":\"109873255271\",\"user_is_login\":true,\"web_id\":\"7167738095474853383\"},\"header\":{\"app_id\":24,\"os_name\":\"windows\",\"os_version\":\"10\",\"device_model\":\"Windows NT 10.0\",\"language\":\"zh-CN\",\"platform\":\"web\",\"sdk_version\":\"5.0.26\",\"sdk_lib\":\"js\",\"timezone\":8,\"tz_offset\":-28800,\"resolution\":\"1493x933\",\"browser\":\"Firefox\",\"browser_version\":\"108.0\",\"referrer\":\"\",\"referrer_host\":\"\",\"width\":1493,\"height\":933,\"screen_width\":1493,\"screen_height\":933,\"tracer_data\":\"{\\\"$utm_from_url\\\":1}\",\"custom\":\"{\\\"ab_sdk_version\\\":\\\"5232086,5323279,4938400,5329067\\\",\\\"user_agent\\\":\\\"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0\\\",\\\"is_pwa\\\":\\\"0\\\"}\"},\"local_time\":1673618574}]",
    "method": "POST",
    "mode": "cors"
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上面的 referrer 参数统统可以放到 headers请求头 中当参数

上面的 await 可以带上（不带控制台返回 Promise {}） 火狐复制自带就有，谷歌浏览器没有的。

控制台-源代码（断点调试技巧）

【参考：Chrome浏览器断点调试技巧_程序媛小y的博客-CSDN博客】

【参考：浏览器断点调试 - 简书】

1.Pause script excution（F8） 单步执行，点击运行到下一个断点，如果没有设置断点会直接运行完代码

2.Step over next function call（F10）单步跳过，点击运行到代码的下一行

3.Step into next function call（F11）单步进入，会进入函数内部调试，进入后可继续执行1和2的操作

4.Step out of current function（shift+F11） 【单步跳出】: 会跳出当前这个断点的函数，和3相反

5.step （F9）一步步执行（不会区分任何自定义函数，所有脚本代码都会依次执行）

6.Deactivate breakpoints 使所有断点临时失效

7.Don’t Pause on exceptions 不要在异常处暂停，

8.Pause On Caught Exceptions 若抛出异常则需要暂停在那里

9.Watch： 监听表达式 不需要一次又一次地输入一个变量名或者表达式，你只需将他们添加到监视列表中就可以时时观察它们的变化：

9.Call stack：调用栈

hover

定位hover显示出现的元素

console

根据颜色判断变量类型 ***

总结 黑/红色为字符串，蓝色为数字或布尔

	let num = 1;
    let str = "2";
    let bool = false;
    console.log(num);    // 蓝色
    console.log({ num }); // 变量：紫色  值：蓝色
    
    console.log(str);   // 黑色
    console.log({ str }); // 变量：紫色  值：红色
    
    console.log(bool);   // 蓝色
    console.log({ bool }); // 变量：紫色  值：蓝色

	let arr = ["1", 2, false];
    console.log({ arr });
    console.log(arr.join());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

突破前端反调试

突破前端反调试–阻止页面不断debugger

【参考：突破前端反调试–阻止页面不断debugger - SegmentFault 思否】

控制台阻止页面跳转

无法阻止跳转，有一个变相的解决方法：选中开发者工具偏上方的Preserve log，保留跳转前的相关记录。