前阵子看到有人提问:

在前端界有哪些比较实用或有趣的开发技巧?

今天,就简单跟大家分享一下,之前我在 Twitter 和 GitHub 上看到的几个比较有意思的前端开发技巧,希望能给你耳目一新的感觉。

快速复制 cURL 命令

如果你想用命令行来快速获取某个网站的 JSON 文件、图片视频等资料时,应该怎么做?

大部分人可能会通过手写 cURL 命令来处理,但其实 Chrome 开发者工具在 Network 一栏提供了一个 Copy as cURL 选项,让开发者能快速生成页面资源相对应的 cURL 命令。

这几个前端开发奇技,你都知道吗?_开发者工具

前端播客主播 Jen Luker 表示在一开始发现这个功能的时候也是大吃一惊:

这几个前端开发奇技,你都知道吗?_聊天室_02

由此可见,Chrome 的开发者工具还是有不少值得我们去探索的地方。

几行代码让页面自动刷新

国外一名叫 Caleb Porzio 的开发者曾经在 Twitter 上分享一个前端调试技巧。通过对 HTML 的 style 标签简单设置几个属性,即可达到自动刷新页面样式的效果。


虽说一般情况下,借助其它工具也能达到这个效果,但是作者的脑洞着实令人佩服,大部分人应该都没想到竟然还能这么做。

纯 CSS 实现异步聊天室

在不借助任何 JavaScript 代码的情况下,能否在 Web 端实现一个异步聊天室呢?

答案是可以。

之前上榜过 GitHub Trending 的一个项目:CSS-Only Chat,告诉了我们具体的解决方案。


作者通过 CSS 中的伪选择器,识别到了页面按钮的点击状态,成功获取到按钮中 backgound-image 中所包含的数据,然后再配合上 HTTP 的数据分块传输编码机制,在无借助任何 JavaScript 代码的情况下,成功实现了异步聊天室的功能。

这几个前端开发奇技,你都知道吗?_javascript_03

那么,如果我们进一步思考:

用户禁用掉浏览器的 JavaScript 功能之后,是否还可以通过这种方法收集前端操作数据呢?

答案是肯定的。

以上,即为本次分享。

技术无止境,前端的路上还有许多值得我们去探索的东西。希望上面分享的几个特殊技巧,能让你对前端开发有新的认知。

如果你觉得内容有用,还请点个「在看」支持下,谢谢。



这几个前端开发奇技,你都知道吗?_javascript_04