前端基础 - 常用调试方式

简介: 前端基础 - 常用调试方式

常用调试方式

问题:

从服务器获取内容时,设置radio总是设置不成功,一直很纳闷,图片如下:

后来问了Java高级工程师陶鹏,学会了如何去调试并解决问题,发现方法很好用,所以写下此博客记录一下。

方法:

  1. 步骤一:
    在html文件里的**< script >**代码块写如下方法:
$(function(){//此方法相当于初始化(必定会执行)
    debugger;  //写下此语句,浏览器会自动进入断点
    $(':radio[name="NTP_SYNC_ONOFF"][value="ON"}]').attr("checked",true); 
})
  1. 步骤二:

打开浏览器,记得要按F12调试模式,不然不会进入断点,进入后的界面如下:

当走完之后会发现 Console 状态栏 报错了,如下:

这个时候,在Console 状态栏可以继续写调试代码,验证程序的正确性,修改后的代码如下:

目录
相关文章
|
2月前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
42 0
|
4月前
|
缓存 前端开发 JavaScript
【第22期】 一文读懂前端调试利器whistle
【第22期】 一文读懂前端调试利器whistle
36 0
|
9月前
|
Web App开发 前端开发 JavaScript
VSCode如何设置Vue前端的debug调试
VSCode如何设置Vue前端的debug调试
553 0
|
18天前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
42 7
|
2月前
|
SQL 存储 JavaScript
前端浏览器调试详解版
前端浏览器调试详解版
57 0
|
4月前
|
Web App开发 移动开发 前端开发
2023前端调试技巧
2023前端调试技巧
|
9月前
|
前端开发
前端学习笔记202307学习笔记第五十六天-搭建react源码调试环境2创建环境
前端学习笔记202307学习笔记第五十六天-搭建react源码调试环境2创建环境
42 0
|
5月前
|
前端开发 测试技术
使用浏览器插件提升前端项目调试速度
使用浏览器插件提升前端项目调试速度
|
8月前
|
Web App开发 前端开发 JavaScript
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
教会你如何高效使用Chrome调试与检测你的CSS代码
171 0
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
|
9月前
|
前端开发
前端学习笔记202307学习笔记第六十天-实现第一种调试方式1
前端学习笔记202307学习笔记第六十天-实现第一种调试方式1
26 0