前端基础 - 常用调试方式

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

常用调试方式

问题:

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

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

方法:

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

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

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

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

目录
相关文章
|
6月前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
675 0
|
6月前
|
缓存 前端开发 JavaScript
【第22期】 一文读懂前端调试利器whistle
【第22期】 一文读懂前端调试利器whistle
124 0
|
Web App开发 前端开发 JavaScript
VSCode如何设置Vue前端的debug调试
VSCode如何设置Vue前端的debug调试
830 0
|
4月前
|
Web App开发 前端开发 JavaScript
前端必备的浏览器调试技巧
【7月更文挑战第18天】 Chrome开发者工具是前端调试的关键,包括快捷键Ctrl+Shift+I/Cmd+Option+I打开它,DOM和CSS调试如编辑元素、样式,JS调试如断点、条件断点和监视变量,网络请求分析,性能评估如Lighthouse和性能面板,及截图、模拟设备等实用技巧,助力开发者提升效率。
124 1
|
4月前
|
Web App开发 存储 监控
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?
|
6月前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
439 1
|
6月前
|
前端开发 数据处理 Android开发
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
【4月更文挑战第30天】本文探讨了Flutter开发中的调试技巧和工具,强调其在及时发现问题和提高效率上的重要性。介绍了基本的调试方法如打印日志和断点调试,以及Android Studio/VS Code的调试器和Flutter Inspector的使用。文章还涉及调试常见问题的解决、性能和内存分析等高级技巧,并通过实际案例演示调试过程。在团队协作中,有效调试能提升整体开发效率,而随着技术发展,调试工具也将持续进化。
91 0
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
|
6月前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
402 7
|
前端开发
前端学习笔记202307学习笔记第五十六天-搭建react源码调试环境2创建环境
前端学习笔记202307学习笔记第五十六天-搭建react源码调试环境2创建环境
60 0
|
6月前
|
SQL 存储 JavaScript
前端浏览器调试详解版
前端浏览器调试详解版
135 0