tag 前端工具

標籤
貢獻18
28
08:49 AM · Nov 22 ,2025
obkoro1 頭像 linshuai 頭像 reeli 頭像 2dian718 頭像 jasinyip 頭像 segmentfault 頭像 helei112g 頭像 kira_58a179b7c1581 頭像 _6085362b65292 頭像 nerohua 頭像 tosmile 頭像 tuihou123321 頭像

@前端工具 / 博客 RSS 訂閱

nerohua 頭像

nerohua - whistle--前端調試利器

一、業務場景 前端本地開發的場景中，我們需要頻繁的改動代碼，並需要實時看到效果，並且在一些開發場景中，我們需要將特定的請求代理到特定的IP、本地文件等，所以使用fiddler或whistle等本地、真機抓包調試工具是非常必要的。 二、為什麼使用whistle 在歷史的長河中，我們是使用fiddler+willow再搭配小米wifi 進行本地和真機抓包調試的，無可厚非，fiddler的抓包和代理的功

前端工具

收藏 評論

wemlin 頭像

文藺 - 微信公眾號編輯助手

介紹下最近剛剛完成的簡單的微信公眾號編輯助手插件，可用於抓取博客，生成 Markdown，經過渲染後，可以注入一鍵注入到公眾號編輯器：幫你省去 C+V 步驟，也無需從其他網頁保存圖片然後再手動上傳。 當然，也可以當作代碼高亮的工具來使用。如果您只需要高亮功能，建議訪問 https://angusfu.github.io/wx-editor/。 Features 專為微信圖文推送定製，M

插件 , 前端工具

收藏 評論

cipchk 頭像

cipchk - 小談 ng deploy 的實現

Angular CLI 在 8.3.0 發佈過一個新命令 ng deploy，可以將 Angular 應用部署到遠程服務器或雲存儲上面，例如：Firebase hosting、Azure、GitHub pages 等等，這也是算是 Angular CLI 最後一個將 Angular 應用從開發到部署打通全能選手工具了。 快速入門 這裏我以 ng-deploy-oss 為示例，演示如何將 Angul

ng-alain , angular , 前端構建 , 前端工具 , 前端

收藏 評論

lingluo 頭像

零落 - vscode常用快捷鍵大全可以做背景圖

編輯器管理快捷鍵 Ctrl + F4, Ctrl + W 關閉編輯器 Ctrl + |切割編輯窗口 Ctrl + 1/2/3 切換焦點在不同的切割窗口 Ctrl + Shift + PgUp/PgDown 切換標籤頁的位置 文件管理快捷鍵 Ctrl + N 新建文件 Ctrl + O 打開文件 Ctrl + S 保存文件 Ctrl + Shift +

快捷鍵 , visual-studio-code , 前端工具 , 前端

收藏 評論

reeli 頭像

橘子小睿 - 通過 Swagger 定義自動生成 Mock 數據

我最近的在做的項目是一個前後端分離的項目，前後端由不同的團隊分別開發，並且前端的進度經常領先後端。這就意味着，當前端在開發一個新功能時，API 可能還沒有準備好。不過，我們會先和後端先商議好 API Schema，然後使用 Mock 數據進行開發。 但問題也隨之而來，定義 Mock 數據並配置 mock server 真的太浪費時間了！我真的非常討厭這種沒有任何技術含量的「苦力活」。所以，只好想辦

mock , 前端工具 , swagger , 前端

收藏 評論

ke1992 頭像

Ke1992 - FPlug--Fiddler前端插件

一、為什麼會有FPlug 前端開發中經常使用Fiddler來進行請求代理和本地文件映射，但Fiddler存在僅支持域名host映射、無法直觀地修改請求/響應頭、本地文件映射無法動態適配callback等不便利性，因此使用Fiddler提供的插件擴展機制，編寫了FPlug，提供一系列Web開發中可能用到的功能 二、下載安裝 EXE安裝 下載FPlug.exe文件並執行 手動安裝 下載FPlug.dl

fiddler , 前端工具 , c# , 調試工具 , 前端

收藏 評論

coypan 頭像

CoyPan - 使用rush.js管理monorepo

本文首發於公眾號：符合預期的CoyPan 寫在前面 2019年9月21號，我參加了第五屆FEDAY。在會上，聽了王澤老師的分享，我第一次接觸到了monorepo這個概念。本文是結合王澤老師的分享，自己進行一定實踐後的總結。 本文中的圖片，均來自我在團隊內部分享時的PPT截圖 Monorepo 一種項目管理方式：一個git倉庫下管理多個項目，適用於大型團隊，框架開發，庫開發等。 線上項目現狀 一看到

項目管理 , 前端工具 , 前端

收藏 評論

yumengzhong2010 頭像

於夢中2010 - atom那些事

走在前端的大道上——atom那些事 最後更新時間2018年1月11日 atom是一款非常好用的編輯器，現在來介紹一些atom必備的插件 都是在file--settings--install 搜索插件的名字，比如：搜索插件language-vue（安裝後可能需要重啓 ） 效果： 1.language-vue 使.vue文件內標籤高亮 2.Emmet 能夠基於Emmet語法產生HTML。

插件 , 前端工具 , atom

收藏 評論

tuihou123321 頭像

tuihou123321 - github copilot在webstorm無法登陸的解決方案

問題描述 github copilot使用到期後，重新續費後。卻發現在webstorm一直登陸不成功。 報錯讓重新登陸。 排查過程 把賬號在vscode上試了下沒問題 檢查webstorm proxy代理設置，全部關閉 webstorm github copilot插件下面看留言： https://plugins.jetbrains.com... 發現有

github , 前端工具 , ide

收藏 評論

tosmile 頭像

浪遏飛舟 - 開發一款前端本地調試命令行工具庫

背景 項目開發中，前端同學經常會本地聯調測試環境，聯調的方法有很多，在《前端項目本地調試方案》一文中我最後講述到在瀏覽器與前端項目本地服務之間加一層代理服務（正向代理），幫助自動登錄拿到令牌後轉發請求獲取靜態頁面、靜態資源以及受保護資源，從而實現聯調。 原理 流程描述： 首先本地啓動前端本地項目和代理服務，代理服務幫助實現自動登錄，拿到令牌 瀏覽器輸入訪問地址，請求首先會到代理服務，代理服

命令行 , 前端工具 , 前端調試 , 調試工具 , npm

收藏 評論

reeli 頭像

橘子小睿 - 搭建前後端之橋

隨着前後端分離，開發的門檻降低了，我們不再要求團隊中的每個開發都是全棧工程師，這樣更容易找到項目的合適人選。團隊也劃分成了前端和後端兩個團隊。前端負責消費 API 並展示頁面，後端負責提供 API。這兩個團隊可以並行開發互不影響，大大提升了效率。雖然前後端分離解決了很多問題，但同時也帶來了新的困擾。 前後端分離帶來的困擾 溝通成本 前後端成為兩個獨立團隊之後，協作的問題便隨之而來。通過什麼來協作呢

前端工具 , swagger , typescript , 前端

收藏 評論

2dian718 頭像

2dian718 - Rails Livereload 搭建

原因是這樣，有一個新的項目，前端想要加入livereload，但沒搭建成功。另一後端又沒搭過，覺得他搭的話，會花費一些時間，索性我我就把它搭了起來。 livereload這種雖然搭建起來沒什麼難度，但要重頭做要看很多東西，比較浪費時間，所以寫了這個類似教程的東西，以便節省時間。 簡介 livereload配合guard，可以達到改動html，assets文件時，刷新頁面的效果（如果改動的是css，

ruby-on-rails , 教程 , 前端工具 , livereload , 前端

收藏 評論

_6085362b65292 頭像

HZFEStudio - Babel 的原理

完整高頻題庫倉庫地址：https://github.com/hzfe/aweso... 完整高頻題庫閲讀地址：https://febook.hzfe.org/ 相關問題 Babel 是什麼 Babel 有什麼用 壓縮代碼如何實現 回答關鍵點 JS 編譯器 AST 插件系統 Babel 是 JavaScript 編譯器：他能讓開發者在開發過程中，直接使用各類方言（如 TS、Flow、JSX

ast , 壓縮工具 , 前端工具 , babel , 前端

收藏 評論

obkoro1 頭像

OBKoro1 - 手摸手教你定製ESLint rule以及瞭解ESLint的運行原理

這篇文章目的是介紹如何創建一個ESLint插件和創建一個ESLint rule，用以幫助我們更深入的理解ESLint的運行原理，並且在有必要時可以根據需求創建出一個完美滿足自己需求的Lint規則。 插件目標 禁止項目中setTimeout的第二個參數是數字。 PS： 如果是數字的話，很容易就成為魔鬼數字，沒有人知道為什麼是這個數字, 這個數字有什麼含義。 使用模板初始化項目： 1. 安裝NPM包

eslint-rule , 前端工程 , 前端工具 , eslint , linter

收藏 評論

linshuai 頭像

linshuai - gulp自動化壓縮合並、加版本號解決方案

雖然網上有很多的 gulp 構建文章，但是很多都已經隨着 gulp 插件的更新無法運行了。因此，我寫了這個比較簡單的構建方案。 如果還不熟悉gulp的插件，可以閲讀上一篇文章：精通gulp常用插件 這個方案主要是為了實現js/css的壓縮合並、自動添加版本號和壓縮html。 gulp-csso 壓縮優化css gulp-uglify 壓縮js gulp-html-

gulp , 構建工具 , 前端工具

收藏 評論

linshuai 頭像

linshuai - 使用 Node.js 開發簡單的腳手架工具

前言 像我們熟悉的 vue-cli，react-native-cli 等腳手架，只需要輸入簡單的命令 vue init webpack project，即可快速幫我們生成一個初始項目。在實際工作中，我們可以定製一個屬於自己的腳手架，來提高自己的工作效率。 為什麼需要需要腳手架？ 減少重複性的工作，不再需要複製其他項目再刪除無關代碼，或者從零創建一個項目和文件。 根據交互動態生成項目結構和配置

node.js , 前端工具

收藏 評論

kira_58a179b7c1581 頭像

kira - 前端開發團隊的工具鏈

彙集前端開發團隊中經常使用的好工具，分享給大家！ 注：都是開源工具 sentry：推薦指數5顆星⭐️⭐️⭐️⭐️⭐️ 推薦理由：開源的代碼異常監控和上報平台，搭建安裝簡單，操作和使用都簡單，支持很多種開發語言的監控上報，提供了快速上手demo，bug異常無需用户主動上報反饋即可知曉，還提供豐富的用户操作信息，提供日常bug郵件通知，週報統計，支持source map 源碼解析，跟蹤非常方便，快速

前端工程化 , 開發工具 , 前端工具 , 前端 , Javascript

收藏 評論

helei112g 頭像

大愚Talk - php工程獅感知的前端工作流程

這個時代不懂點前端知識，真的沒有辦法生存。就算不會寫，也得了解它的原理吧！ 最近做了一些總結，之前都是迷迷糊糊，搞不清楚前端之前的相關定位。好好梳理了一下。錯誤之處請各位指正。 本文主要説的是 JavaScript 工作流程 目前前端真的該叫大前端，其越來越細化，越來越複雜。在這種背景下，誕生了很多工具很多前端工作流程。比如熱門的： react vue webp

react , vue.js , 前端工程化 , 前端工具 , Javascript

收藏 評論

obkoro1 頭像

OBKoro1 - 一鍵優雅的刷Github commit(填滿首頁的綠色格子)-autoCommit

autoCommit 用於刷commit記錄，可以刷過去幾年的commit以及未來的commit, 一鍵幫你把github首頁的綠色格子填滿。 它是一個VScode插件可以自由控制commit日期(提交過去幾年的commit以及未來的commit) 它可以自由控制commit次數, 固定或者隨機commit次數。 插件提供完善的日誌: 清晰的瞭解插件的運行情況 使用效果 使用本插件來

github , visual-studio-code , 前端工具 , commit

收藏 評論

segmentfault 頭像

SegmentFault思否 - SegmentFault 技術週刊 Vol.29 - 聽説前端又出新工具了？驚不驚喜？

在前端刀耕火種的年代，佈局用 table 標籤，CSS 樣式大量內聯；校驗 JS代碼是否規範，需要複製代碼到 jshint（相信很多 “前輩” 對此都不陌生）；壓縮合並代碼，也是通過壓縮工具壓縮完再複製到一個文件裏；修改了代碼要查看效果，必須手動刷新瀏覽器；代碼寫好了要發佈到服務器，需要用 FTP 軟件上傳，等等等等。 其實嚴格來説，那個時候還沒有前端開發這個職位，那個時候叫切圖仔或者頁面仔，隸

前端工程化 , 前端構建 , 前端工具 , segmentfault-技術週刊

收藏 評論

jasinyip 頭像

JasinYip - 前端工具鏈課（二）—— 模塊化工具及組件化思想

第二個問題，我想從這個最簡單的 HTML 頁面開始。 !DOCTYPE html html head titleTest/title /head body ... /body 當我們想寫一些樣式的時候，我們通常會引入一個外部的 CSS 文件，就像這樣： link rel="stylesheet" href="style.css" 有時我們可能會想用一個比如説 Bootstrap 這種的

前端工程化 , 前端工具 , 模塊化 , webpack , 前端

收藏 評論