---
url: https://sugarat.top/weekly/2024-04-21.md
description: >-
  ① Chrome devtools 124 新功能 ② sshx - 终端协作 ③ ElemSnap - 浏览器美化截图插件 ④ PNPM v9发布 ⑤
  Classnames - 变量命名单词表 ⑥ SVG Encoder - SVG 转其它编码 ⑦ 头像动漫化
---

# 视野修炼第81期 | Chrome 124 新功能

欢迎来到第 81 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

**​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）**

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. Chrome devtools 124 新功能](https://developer.chrome.com/blog/new-in-devtools-124?hl=zh-cn)

① 新的自动填充面板

![](https://img.cdn.sugarat.top/mdImg/sugar/953be8d99fcf90439e20175da9dc52d6)

② CSS 嵌套展示支持

![](https://img.cdn.sugarat.top/mdImg/sugar/e346813fada407dc552f93d78991ed05)

③ 一些弃用

![](https://img.cdn.sugarat.top/mdImg/sugar/95a0c39d74f120e55daf745201756a46)

*上面三个变动是笔者觉得值得关注的，大概率用得上。*

### [2. sshx](https://sshx.io/) - 终端协作

支持多人在同一终端里协作使用（通过 Web 浏览器操作）。

![](https://img.cdn.sugarat.top/mdImg/sugar/abe55fde83d351894dfebc148399fe55)

```sh
# ① 安装
curl -sSf https://sshx.io/get | sh

# ② 启动
sshx
```

访问终端打印的结果即可在网页中看到与使用终端。

```sh
sshx v0.2.3

  ➜  Link:  https://sshx.io/s/VkYmwJp0hU#uHJAF2nAQNFwES
  ➜  Shell: /bin/zsh
```

*笔者觉得这个工具很适合用于实时终端操作演示，或者终端远程协助。*

## 🔧开源工具&技术资讯

### [3. ElemSnap](https://www.elemsnap.com/) - 浏览器美化截图插件

使用很简单，效果还可以，下面就是截图效果。

![](https://img.cdn.sugarat.top/mdImg/sugar/5609f357ac4c8638c9160f48ee07b35f)

下面是编辑面板。

![](https://img.cdn.sugarat.top/mdImg/sugar/b82dbd9ad9c2ec2a19beb4f224588a97)

### [4. PNPM v9发布](https://github.com/pnpm/pnpm/releases/tag/v9.0.0)

兼容性：现在要求 **Node.js 版本 >= 18**。

![](https://img.cdn.sugarat.top/mdImg/sugar/bacdca6acaa906476c179e1b8f582b7d)

Lock 文件：采用 `Lockfile v9`。**更好的降低 Git 冲突的概率，更高的可读性**；不在支持 lockfile v5，需要使用 pnpm8 先转成 v6。

支持从 git 子目录安装依赖。

```sh
pnpm add github:user/repo#path:packages/foo
```

### [5. Classnames](https://classnames.paulrobertlloyd.com/) - 变量命名单词表

用于寻找命名 HTML 类、CSS 属性或 JS 函数的灵感。

可以帮助解决编程中常见的“命名困难”问题，提供按主题分组的单词列表。

![](https://img.cdn.sugarat.top/mdImg/sugar/441e68addf90427a3702bf77051c737c)

### [6. SVG Encoder](https://svgencode.com/) - SVG 转其它编码

将 SVG 转换为不同格式的工具。

![](https://img.cdn.sugarat.top/mdImg/sugar/ada583df2cc92af7555243ede9bfb56f)

## 🤖AI工具&资讯

### [7. 头像动漫化](https://www.animefilter.online/convert.html)

使用非常简单，上传一张图片即可，随手抓拍了一下对象😜。

![](https://img.cdn.sugarat.top/mdImg/sugar/a13fc870227b255d8e487011cfc503b5)

![](https://img.cdn.sugarat.top/mdImg/sugar/ada587d069d933a940d188db5ff2b6f7)

底层使用 `stable diffusion`。

## 😛趣图

最近实在是太忙了，没太多时间冲浪收集（已经连上 7 天班了😱！）

*欢迎大家评论分享有趣的图片。*

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）[移步博客](https://sugarat.top/weekly/index.html)

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://sorrycc.com/mdh/) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [前端RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章
* [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！
* [FRE123 技术周刊精选](https://www.fre123.com/weekly) - 前后端技术周刊精选推荐信息流