那些让我苦笑不得的 Bug:编码之路的坎坷经历

news2024/11/18 0:00:24

文章目录

    • 1. CSS 中的样式“消失”问题
    • 2. JavaScript 的变量命名引发的混乱
    • 3. 时间格式的困扰
    • 4. 数据库查询条件引发的错误
    • 结语

在这里插入图片描述

🎉欢迎来到Java学习路线专栏~那些让我苦笑不得的 Bug:编码之路的坎坷经历


  • ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹
  • ✨博客主页:IT·陈寒的博客
  • 🎈该系列文章专栏:Java学习路线
  • 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习
  • 🍹文章作者技术和水平有限,如果文中出现错误,希望大家能指正🙏
  • 📜 欢迎大家关注! ❤️

在编程的世界里,充满了挑战和成就感,但也常常伴随着各种各样的困难和 bug。有时候,我们会遇到一些看似很难解决的问题,费尽心思查找 bug 的原因,然而最后却发现问题的答案是那么的简单,以至于让人忍俊不禁。在这篇文章中,我将分享一些让我困扰良久、后来却发现极为简单的 bug 经历,或许你也曾有过类似的经历,让我们一同笑对这些编码之路上的坎坷。

在这里插入图片描述

1. CSS 中的样式“消失”问题

有一次,我正在开发一个网页,突然发现某个页面元素的样式完全失效了。我检查了代码、查看了浏览器开发者工具,却找不到任何问题。于是,我开始怀疑是不是自己写的 CSS 样式出了什么问题。我仔细查看了代码中的每一行 CSS,也没能找到问题所在。在经历了一番抓狂之后,我决定回到代码的起点,重新检查那个页面元素的样式。

最终,我发现问题不在 CSS 中,而是在 HTML 结构中。在一个父元素上,我设置了 display: flex; 属性,然后在其中的子元素上设置了 width: 100%;。然而,我却忽略了这个子元素的兄弟元素也属于这个父元素,导致在布局时宽度计算出现问题。问题的解决办法很简单,只需给这个子元素添加 box-sizing: border-box; 属性,让它的宽度包含 border 和 padding。

教训:在处理样式问题时,要注意 HTML 结构的影响,有时候 bug 可能并不在 CSS 中。

2. JavaScript 的变量命名引发的混乱

在一个 JavaScript 项目中,我遇到了一个奇怪的 bug,导致某个变量的值始终不正确。我在代码中反复检查这个变量的赋值和使用,但就是找不到问题所在。为了更好地调试,我将这个变量的值打印出来,发现它的值总是 undefined

在一番艰难的排查之后,我终于发现了问题所在:在某处我使用了与这个变量同名的局部变量,覆盖了外部的变量。原来,在 JavaScript 中,如果你在某个作用域内声明了一个变量,而这个变量的名称与外部作用域的变量相同,那么内部的变量会覆盖外部的变量,这就是变量提升导致的问题。

教训:在 JavaScript 中,要注意变量的作用域,避免同名变量导致的意外覆盖。

3. 时间格式的困扰

处理日期和时间总是一个容易让人头疼的问题。有一次,我需要将后端返回的时间字符串转换成特定格式的显示时间。我使用了 JavaScript 中的 Date 对象和相关的方法进行转换,但是最后的结果总是不对,显示的时间总是相差几个小时。

我花费了很长时间检查时区设置、日期格式等问题,但问题依然存在。最后,我发现后端返回的时间字符串已经包含了时区信息,而我在使用 new Date() 构造函数时并没有考虑到这一点。解决问题的方法是使用 Date 对象的 new Date('your-time-string') 形式,确保时区信息被正确解析。

教训:在处理时间时,要确保对时区的处理正确,尤其是涉及到后端返回的时间数据。

4. 数据库查询条件引发的错误

在一个数据库查询的过程中,我使用了一个带有条件的查询语句,但总是得不到正确的结果。

我检查了数据库的数据、查询语句,却找不到问题。在怀疑是不是数据库连接出了问题的时候,我突然意识到问题可能出现在了查询条件的构造上。

原来,我使用了一个条件判断语句,根据前端传递的参数来动态构造查询条件。但是,由于 JavaScript 中存在类型隐式转换,我在判断字符串是否为空时犯了个低级错误。我使用的判断条件是 if (param === ''),这在 JavaScript 中会判定为空。然而,当参数是 undefined 时,这个判断条件同样成立,导致查询条件不准确。

教训:在构造查询条件时,要注意参数的类型,确保条件判断的准确性。

结语

在编码的过程中,遇到 bug 是正常的,而且每个人都会有一些令人啼笑皆非的 bug 经历。这些 bug 不仅是技术上的挑战,更是我们成长的一部分。通过总结和分享这些经历,我们可以更好地理解和规避类似的问题,同时也能够更轻松地面对编程中的种种波折。希望你在编码的路上能够快乐成长,发现 bug 时能够豁然开朗,发自内心地苦笑一番。


🧸结尾 ❤️ 感谢您的支持和鼓励! 😊🙏
📜您可能感兴趣的内容:

  • 【Java面试技巧】Java面试八股文 - 掌握面试必备知识(目录篇)
  • 【Java学习路线】2023年完整版Java学习路线图
  • 【AIGC人工智能】Chat GPT是什么,初学者怎么使用Chat GPT,需要注意些什么
  • 【Java实战项目】SpringBoot+SSM实战:打造高效便捷的企业级Java外卖订购系统
  • 【数据结构学习】从零起步:学习数据结构的完整路径

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1211189.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

十大适合外贸企业邮箱的Gmail替代品推荐

电子邮件仍然是许多人选择的媒介,因为它是交换信息的最可靠和正式的方法。无论是个人还是小型企业,电子邮件仍然是个人和专业用途的重要通信工具。它提供了一种安全、可靠且正式的方法来交换信息和文档以及共享文件。 对于大多数人来说,Googl…

Vue中的watch的使用

先看下Vue运行机制图 那么我们思考一件事,vue是通过watcher监听数据的变化然后给发布-订阅,这样实现了dom的渲染,那么我们思考一件事,我们往往需要知道一个数据的变化然后给页面相应的渲染,那么我们工作中在组件中的数…

python安装pip install报错Could not fetch URL https://pypi.org/simple/pip/...更换镜像源

更换镜像源 一. 现象pycharm使用 pip install xxx安装包时,一直报错: 二. 原因:三. 解决办法:一. 临时使用二. 永久更改三. 永久更改1. Windowswindows环境下Windows(示例win10) 2. Linux or Mac3. Pycharm…

下一代VPN工具:体验TailScale的简便和高效

目录 一、概要VPN 是什么?TailScale 是什么 二、使用1、注册2、下载安装3、 Windows4、Linux5、 Android6、测试 三、Nginx整合Tailscale做端口转发 一、概要 VPN 是什么? 看到 VPN 第一反应应该是翻墙,但 VPN 最初应该也是最普遍的用途应该…

亚马逊鲲鹏系统可全自动化批量操作亚马逊买家号

亚马逊鲲鹏系统可以注册买家号、智能养号、自动下单、自动留评、QA等,是一款从注册到下单于一体的软件。 如果想要自动化注册,那么准备好账号所需要的邮箱、ip、手机号之后就可以进行自动注册了,注册时可以自动输入账号密码信息、自动接收验证…

spring cloud alibaba 之哨兵(sentinel)

sentinel (哨兵) 简介 # 官网 - https://spring-cloud-alibaba-group.github.io/github-pages/hoxton/en-us/index.html#_spring_cloud_alibaba_sentinel # github - https://github.com/alibaba/Sentinel/wiki# 简介 - 随着微服务的普及,服务调用的稳定性变得越来…

HPC 工作负载管理 —— IBM Spectrum LSF Suite

全面的工作负载管理解决方案,通过增强用户和管理员体验以及实现规模性能来简化 HPC。 IBM Spectrum LSF Suites 是面向分布式高性能计算 (HPC) 的工作负载管理平台和作业调度程序。基于 Terraform 的自动化现已可用,该功能可在 IBM Cloud 上为基于 IBM …

2023年亚太杯APMCM数学建模大赛数据分析题MySQL的使用

2023年亚太杯APMCM数学建模大赛 以2022年C题全球变暖数据为例 数据分析: 以2022年亚太杯数学建模C题为例,首先在navicat建数据库然后右键“表”,单击“导入向导”,选择对应的数据格式及字符集进行数据导入 导入之后&#xff0c…

录音频用什么软件?助你轻松捕捉声音!

“有没有什么录音频的软件推荐呀?学校要求拍摄一个关于交通安全的纪录片,现在视频拍摄好了,音频却出了问题,需要重新补录声音,但是找不到合适的录音频软件,有人知道吗?” 录制音频是我们在工作…

冯诺依曼体系和操作系统简单介绍

冯诺依曼体系和操作系统简单介绍 冯诺依曼体系 输入设备:键盘,话筒,摄像头,usb,鼠标,磁盘/ssd,网卡等等输出设备:显示器,喇叭,打印机,磁盘&#…

xstream实现xml和java bean 互相转换

目录 pom引用java bean 类XML 转换工具类测试类执行结果注意问题 JAXB方式见: JAXB实现XML和Bean相互转换 Java中实现XML和Bean的转换的方式或插件有以下几种: JAXB(Java Architecture for XML Binding):JAXB是Java …

优化了

v2.0.2版本在 github 发布了。 ## 优化的功能 优化(定时任务): 测试计划与定时任务模块进行了合并,极大的简化了操作步聚。 1、前端页面,测试计划plan,加入1个接口,设置每分钟运行1次。 2、开启定时任务服务,后台日志 …

微信小程序H5 uniapp

最近微信小程序对有视频播放的审核严,需要提供“文娱类资质”。而申请这个资质比较繁琐。所以我们在小程序上用web-view做跳转到H5,H5使用uniapp编写。这是小程序关于web-view文档说明。https://developers.weixin.qq.com/miniprogram/dev/component/web…

NI MIMO原型验证系统硬件介绍 已更新 2023年1月6日

https://www.ni.com/zh-cn/shop/wireless-design-test/what-is-the-mimo-prototyping-system/introduction-to-the-ni-mimo-prototyping-system-hardware.html 概览 随着采用无线连接方式的设备大量涌现,迫切需要研发可满足更高数据与容量需求的无线技术。来势汹汹…

抖音直播招聘报白企业人力资源有招聘需求的看过来

人力资源行业抖音招聘报白开始了,但是目前的市面的价格不一,很多人力资源公司最近想做抖音的直播报白,做直播待岗,因为最近刚好是招聘高峰期啊,企业需求大,赶上这一波,但是对目前市面上做抖音报…

力扣每日一题-K个元素的最大和-2023.11.15

力扣每日一题:K个元素的最大和 题目链接:2656.K个元素的最大和 题目描述 代码思路 题目看完直接笑嘻了,还有这么容易的题。由题可知,第一次要找出最大值m,那由于把m1放回去,那第二次找的就是m1,以此类推…

seatunnel及web安装常见问题与解决方法

mvn加速下载seatunnel相关jar包 安装seatunnel过程中,解压文件后官方默认提供的connector的jar包只有2个,要想连接mysql,oracle,SqlServer,hive,kafka,clickhouse,doris等时&#x…

问题 H: 棋盘游戏(二分图变式)

题意:要求找到 不放车就无法达到最大数的点 的个数 题解:1.以行列绘制二分图 2.先算出最大二分匹配数 3.依次遍历所有边 删除该边,并计算二分匹配最大值 (若小于原最大值即为重要点)&#xff0…

安装selenium(超级详细)

selenium本身是一个自动化测试工具,它可以让python代码调用浏览器,并获取到浏览器中加载的各种资源,我们可以利用selenium提供的各项功能, 帮助我们完成数据的抓取。 1、在PyCharm中安装selenium 点击PyCharm界面的下方Terminal…

开源项目datavines内存泄漏问题分析

应用程序开启JMX java -Dspring.profiles.activemysql -Dcom.sun.management.jmxremote.port1099 -Dcom.sun.management.jmxremote.sslfalse -Dcom.sun.management.jmxremote.authenticatefalse -Djava.rmi.server.hostname127.0.0.1 -jar dataVines.jar 通过jdk自带工具&…