那些让我苦笑不得的 Bug:编码之路的坎坷经历
文章目录
- 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外卖订购系统
- 【数据结构学习】从零起步:学习数据结构的完整路径
相关文章:

那些让我苦笑不得的 Bug:编码之路的坎坷经历
文章目录 1. CSS 中的样式“消失”问题2. JavaScript 的变量命名引发的混乱3. 时间格式的困扰4. 数据库查询条件引发的错误结语 🎉欢迎来到Java学习路线专栏~那些让我苦笑不得的 Bug:编码之路的坎坷经历 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒🍹✨…...

http接口测试—自动化测试框架设计
一、测试需求描述 对服务后台一系列的http接口功能测试。 输入:根据接口描述构造不同的参数输入值(Json格式) 输出:字符串(传入的方式传入的字符串) http://localhost:8090/lctest/TestServer 二、程序设计…...

HTML 之常用标签的介绍
文章目录 h标签p标签a标签img 标签table、tr、td标签ul、ol、li 标签div 标签 h标签 <h> 标签用于定义 HTML 文档中的标题,其中 h 后面跟着一个数字,表示标题的级别。HTML 提供了 <h1> 到 <h6> 六个不同级别的标题,其中 &…...

数据恢复入门分享-启动扇区
启动扇区位于存储区的前端,一般显示如下 如果扇区数据丢失或者错误 存储器也就不能识别和数据存储了 关注我们,不定期分享互联网数字化的干货 #数据恢复##储存卡##启动扇区#...

解决Chrome无法自动同步书签
前提:(要求能正常访问google) 准备一个谷歌账号 安装Chrome浏览器 开启集装箱插件(或者其他能访问谷歌的工具) 步骤:(使用集装箱插件/能正常访问谷歌的其他工具) 下载安装使用“集…...

Java绘图-第19章
Java绘图-第19章 1.Java绘图类 1.1Graphics类 Graphics类是用于绘制图形的抽象类,它是java.awt包中的一部分。Graphics类提供了各种方法,可以在图形上绘制各种形状、文本和图像。这些方法包括画线、画矩形、画椭圆、画弧、绘制图像等。 1.2Graphics2…...

SpringBoot文件在线预览实现
kkFileView - 在线文件预览,一款成熟且开源的文件文档在线预览项目解决方案。 详细wiki文档:https://gitee.com/kekingcn/file-online-preview/wikis/pages 中文文档:https://gitee.com/kekingcn/file-online-preview/blob/master/README.md…...

cudnn安装
安装地址 cudnn安装地址:https://developer.nvidia.com/rdp/cudnn-download 安装 选择windows版本的下载,我这里选择的这个: 下载之后解压即可。 后续 后续:第一步 把cudnn的bin,include,lib三个文件…...
uni-app发布后iOS端页面背景图片上下滑动问题
问题分析 uni-app发布后iOS端页面背景图片会跟着上下滑动。 解决方案 在pages.json文件中添加配置"bounce": "none" {"pages": [{"path": "pages/login/login","style": {"navigationStyle": "…...

ctfshow 文件上传 151-161
文件上传也好久没做了。。 手很生了 151 前端绕过 只能上传png文件 使用bp抓包,修改文件名后缀为php 上传成功,发现文件上传路径 使用蚁剑连接 找到flag 152 152 后端校验 跟上一关一样 表示后面即使执行错误,也不报错 抓包修改文件…...

Selenium浏览器自动化测试框架简单介绍
selenium简介 介绍 Selenium [1] 是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Firefox,Safari,Google …...

bclinux aarch64 ceph 14.2.10 文件存储 Ceph File System, 需要部署mds: ceph-deploy mds
创建池 [rootceph-0 ~]# ceph osd pool create cephfs_data 64 pool cephfs_data created [rootceph-0 ~]# ceph osd pool create cephfs_metadata 32 pool cephfs_metadata created cephfs_metadata 64 报错 官方说明: 元数据池通常最多可容纳几 GB 的数据。为…...
【微前端】micro-app搭建项目实战
主应用 1、安装依赖 npm i micro-zoe/micro-app --save 2、初始化micro-app import microApp from ‘micro-zoe/micro-app’ microApp.start() 项目环境 vue3 ts 主应用实例 // main.ts 1.引入插件 import microApp from ‘micro-zoe/micro-app’ 2.初始化插件 microApp.star…...

C语言——分割单向链表
本文的内容是使用C语言分割单向链表,给出一个链表和一个值,要求链表中小于给定值的节点全都位于大于或等于给定值的节点之前,打印原始链表的所有元素和经此操作之后链表的所有元素。 分析:本题只是单向链表的分割,不涉…...
台式电脑的IP地址在哪里?解密台式电脑网络连接的秘密!
如今智能手机和便携式笔记本电脑盛行的时代,台式电脑似乎逐渐被人们所忽视。然而,对于需要高性能和大容量存储的用户来说,台式电脑依然是最好的选择。而作为一款能够连接网络的设备,台式电脑也有自己独特的IP地址。下面虎观代理…...
设计模式案例 (三)
文章目录 系列文章目录前言一、单例模式懒汉模式case 包饿汉模式case 包懒汉模式枷锁case 包 系列文章目录 第一章 设计模式案例 (一) 第二章 设计模式案例 (二) 第三章 设计模式案例 (二) 文章目录 系列文章目录前言一、单例模式懒汉模式case 包饿汉模…...

JZ22:链表中倒数第k个结点
JZ22:链表中倒数第k个结点 题目描述: 输入一个链表,输出该链表中倒数第k个结点。 示例1 输入: 1,{1,2,3,4,5} 返回值: {5} 分析: 快慢指针思想: 需要两个指针,快指针fast&…...

python的高性能web应用的开发与测试实验
引言 python语言一直以开发效率高著称,被广泛地应用于自动化领域: 测试自动化运维自动化构建发布自动化 但是因为其也具有如下两个特征: 解释型语言GIL全局解释器锁 前者导致其性能天然就被编译型语言在性能上落后了许多。而后者则在多核…...
除了http还有哪些通信协议?
除了HTTP协议外,还存在许多其他通信协议。以下是一些常见的通信协议: 1:HTTPS:HTTPS(HTTP Secure)是HTTP的安全版本,通过使用SSL(Secure Sockets Layer)或TLS࿰…...
基于遗传算法的图像重建
图像重建涉及从图像的有限信息中恢复出可能丢失或受损的信息。使用遗传算法进行图像重建的一般思路是调整某些参数或者操作,以使得图像的质量或者特定的性能指标最优化。 以下是一个简单的图像重建的遗传算法示例,以模拟重建一个被模糊的图像。 图像重…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
A2A JS SDK 完整教程:快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...

【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

Python 实现 Web 静态服务器(HTTP 协议)
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1)下载安装包2)配置环境变量3)安装镜像4)node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1)使用 http-server2)详解 …...