-
应检查并重置white-space:nowrap为normal，设置明确width值，避免word-break:keep-all，优先用flex/grid替代float。
-
ChromeDevTools断点需设在可执行语句（如if、赋值），避开var声明/空行/注释；压缩代码须启用SourceMap，动态脚本需Blackbox；条件断点、debugger语句、异步回调断点及console高级用法（table/group/time）可提升调试效率。
-
本文介绍如何利用JavaScript的rest参数语法，让函数能接收任意数量的回调函数作为参数，避免硬编码参数名，提升代码复用性与可维护性。
-
模板字面量是JavaScript中唯一支持多行、表达式嵌入、标签函数和原始字符串解析的字符串构造机制，必须用反引号定义，支持运行时表达式求值、标签函数拦截及String.raw原始解析。
-
JavaScript的Iterator接口是一种统一的遍历协议，其核心是通过实现Symbol.iterator方法使对象可迭代，具体步骤为：1.对象需实现Symbol.iterator方法，返回一个迭代器；2.迭代器必须有next()方法，每次调用返回{value,done}对象；3.done为true时遍历结束，value通常为undefined。例如自定义createRangeIterator函数生成指定范围数字，通过[Symbol.iterator](){returnthis;}让迭代器自身可遍历，
-
Tailwind的disabled:变体需元素真实携带disabled属性才生效，JIT模式下开箱即用但依赖HTML正确渲染；若未启用插件、未同步设置disabled属性或使用非原生可禁用标签，则样式不触发。
-
合理使用grid-template-areas可解决多层嵌套CSS网格布局的混乱问题，通过为每层容器独立定义语义化命名区域，如header、main、footer，并确保子网格不继承父级行列结构，避免深层元素误入外层网格；例如父级用"headhead""navmain"划分区块，子网格在main内再定义"content""ad"，使各层布局解耦；关键在于每层仅管理直接子元素，不跨容器定位，用padding或margin替代跨轨道调整，从而提升可读性与可维护性，防止错位。
-
WebSocket连接失败：检查newWebSocket()的URL格式浏览器里newWebSocket()报错“Errorinconnectionestablishment”，八成是协议或地址写错了。WebSocket不是HTTP，不能用http://或漏掉协议前缀。正确写法必须是wss://example.com/ws（生产）或ws://localhost:8080（开发），ws和wss都要小写，且不能带路径参数如?token=xxx（得走head
-
图片不能直接存数据库，须转二进制（BLOB）或存路径；主流做法是存路径，上传时清洗文件名、用参数化SQL、删记录前同步删文件，并统一媒体访问路由。
-
::first-letter仅对块级容器或table-cell等形成独立格式化上下文的元素生效；作用于inline元素如<span>时浏览器直接忽略，需设display:block或inline-block，并避免父级font-size:0等干扰。
-
Symbol.iterator是对象可被for...of遍历的必要条件，其返回值必须是含next()方法的迭代器，且next()每次调用须返回{value,done}；常见错误包括缺失done、this未实现next、箭头函数导致this绑定失效；Range类需确保[Symbol.iterator]是普通函数、每次返回新迭代器、done为true后仍稳定返回{done:true}。
-
position:sticky的悬停效果依赖最近的滚动祖先容器，当父级设置overflow:auto/hidden时，sticky会以该父级为边界而非视口。正确做法是确保目标容器明确设置overflow-y:auto并限定高度，使sticky标题在局部滚动区域内悬停，同时检查祖先元素避免意外截断。
-
使用flex-direction:column可实现表单垂直布局，通过设置容器为Flex并结合gap与align-items控制间距和对齐，配合嵌套结构优化标签与输入框组合，再利用width:100%统一输入宽度，最后借助媒体查询适配响应式，从而构建清晰易维护的表单。
-
密码不可跨域明文传递，须用WebCryptoAPI的PBKDF2在前端加盐派生密钥（iterations≥100000、SHA-256、后端下发盐），导出十六进制凭证供后端校验，全程内存操作并立即清空原始密码。
-
默认情况下input和label在Flex容器中垂直不对齐，因表单控件baseline位置不统一且align-items:stretch下拉伸加剧错位；推荐统一box-sizing:border-box并设align-items:center（单行控件）或baseline（含textarea时微调）。
