我的笔记

高频知识点

实用工具-笔记

实用工具笔记

2026-7-17

原始笔记链接：https://cloud.seatable.cn/dtable/external-links/59b453a8639945478de2/

0843 file-server

https://filebrowser.org/installation

支持本地编辑，查询，管理，文本文件的工具（支持 brew 本地部署或者 docker 部署）

1
2
3

brew tap filebrowser/tap
brew install filebrowser
filebrowser -r /path/to/your/files

​

0870 浏览器内置截图

浏览器打开控制台，打开命令菜单：Command+Shift+P（MacOS）

基本上所有功能都有对应的搜索和快捷键，多使用即可

截图

  • Capture area screenshot：对鼠标拖动选取的区域进行截屏。

  • Capture full size screenshot：截取整个网页的屏幕快照，包括可视窗口中未出现的所有内容。网页截图：主要用于保存长网页，在搜索框中输入“Capture full size screenshot”，选择该命令并点击或按下回车键。Chrome将自动截取整个网页的内容，并保存为PNG格式的图片文件——这里截图需要全局有滚动条

  • Capture node screenshot：对选中的 DOM 元素节点进行截屏，可精确捕获该元素的内容。

主题

  • 切换主题：输入 “Switch to dark theme” 可切换到深色主题，“Switch to light theme” 则切换到浅色主题，方便在不同环境下使用调试工具。

  • 改变调试窗口位置：“Dock to bottom” 将调试窗口设置在底部；“Dock to left” 设置在左侧；“Dock to right” 设置在右侧；“Undock into separate window” 可将调试窗口设置为独立的窗口，与浏览器界面分离开。

文件

  • 快速切换文件：在命令菜单中输入文件名或相关关键词，可快速切换到源代码面板中的指定文件。如果知道文件中的具体函数或变量名，也可以直接搜索定位。

  • 源代码里跳转行数：按Ctrl + G（Windows/Linux）或Cmd + G（Mac），然后输入行数，可快速跳转到源代码中的指定行。

调试

  • Enable/Disable JavaScript：用于启用或禁用页面上的 JavaScript 代码，方便调试与 JavaScript 相关的问题，例如在排查页面加载问题时，可先禁用 JavaScript 来确定是否是脚本导致的异常。

  • Toggle device toolbar：切换到设备模式，可模拟不同的移动设备或平板设备，方便进行响应式设计的调试，查看页面在不同设备尺寸下的显示效果。

0904 HEIC 和 HEIF 图片说明

HEIC 和 HEIF 是新标准下的图片，区别如下：

HEIF：是一种标准容器格式（包括更多元数据信息，例如拍照的相机参数，地理位置），例如小米手机拍摄的照片，可以设置存储为 HEIF 或者 JPG 格式。

HEIC：是苹果的图片格式，使用了 HEIF 的容器格式，内置了 video 格式，使用了 HEVC 压缩格式进行压缩。

mac 系统下格式转换：https://github.com/strukturag/libheif 使用 brew 安装工具，然后可以把 HEIC 和其他合适转换

JS 下格式转换：https://alexcorvi.github.io/heic2any/ 可以把 HEIC 转换成各种图片格式

0903 动图实现逻辑

动态图实现逻辑：

1、使用传统 gif 实现动图效果，兼容性很好。

2、Google Motion Photo 使用 jpg 后缀格式的图片，后面附加了一个 MP4 格式的视频的数据，部分设备兼容。