禁止别人调试自己前端代码的 5 种方法

发表于 2023-12-14 更新于 2024-07-26 分类于技术本文字数： 1k 阅读时长 ≈ 4 分钟

无限 debugger

前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点，因为 debugger 在控制台被打开的时候就会执行。由于程序被 debugger 阻止，所以无法进行断点调试，所以网页的请求也是看不到的。以下是使用无限 debugger 方式阻止代码调试的示例：

/**
 * 基础禁止调试代码
 */
(() => {
  function ban() {
    setInterval(() => {
      debugger;
    }, 50);
  }
  try {
    ban();
  } catch (err) {}
})();

发表于 2023-12-06 更新于 2024-07-29 分类于技术本文字数： 1.4k 阅读时长 ≈ 5 分钟

FLEXBOX CSS3 中的一种布局模式，它可以帮助开发者更加方便地实现自适应布局和响应式设计。FLEXBOX 基于弹性盒子模型，通过对容器和容器内元素的属性设置来实现灵活的布局。

在 FLEXBOX 中，容器是指设置了 display:flex 或 display:inline-flex 属性的元素，容器内的元素则是指容器的子元素。通过设置容器和容器内元素的属性，可以实现以下功能：

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）。

发表于 2023-11-29 更新于 2023-11-30 分类于技术本文字数： 429 阅读时长 ≈ 2 分钟

后台返回数据包含年，月和日，希望实现一个柱状图，当点击年数据时，下钻到月数据，点击月数据时，下钻到日数据。并包含返回功能。

通过重绘图表的方式实现，实现思路如下：

发表于 2023-11-27 分类于技术本文字数： 161 阅读时长 ≈ 1 分钟

今天用暴力猴脚本下载的 youtube 视频音频和视频是分开的，查找了一下解决办法，记录一下：

首先，win7 安装 ffmpeg。注意配置环境变量，如果环境变量不生效，最好把用户环境变量也配置一下。
将需要合并的音频和视频文件放在同一个目录下，打开 cmd，输入 ffmpeg -i 1.mp4 -i 2.mp4 -vcodec copy -acodec copy output.mp4 其中，1.mp4 和 2.mp4 为需要合并的文件名，output.mp4 为输出文件名，可任意修改。
执行命令后，合并后的文件保存在当前目录下。

发表于 2023-11-14 分类于技术本文字数： 83 阅读时长 ≈ 1 分钟

在 VSCode 中打开原生 HTML 项目，会报错 Could not read source map for file:///D，此时安装一个 Live Server 的插件，然后使用 Open with Live Server 就可以了。