WEBフロントエンドデザイナーがよく使うツール集_基礎知識

以下は、フロントエンド開発用にまとめて集めた、一般的に使用されるプラグイン、ツール、ソフトウェアなどです。これらの使用方法としては、コンピューターの小さなバックアップに相当します。将来的にはそれらをまとめていきますので、今のところは自分でグーグルで調べてください。

【FireFoxプラグイン】

1. Firefbug —— ページデバッグツール

2. YSlow —— Web ページ評価ツール

3. Pixel Perfect —— HTML とデザインドラフトの比較

4. CSS の使用 —— CSS 使用効率最適化ツール

5. ページ速度 —— YSlow と同様に Web ページを迅速に最適化します

6. Measureit —— リアルタイム測定ツール

7. Fiddler —— ページ スタイルをローカルに調整するための強力なツール

8. DNS フラッシャー —— DNS リフレッシュ ツール

9. Colorzilla —— リアルタイム色選択ツール

10. Web 開発者 —— Web ページの関連情報を確認します

11. FireMobileSimulator —— 携帯電話をシミュレートします

12. JavaScript ダバッガー —— JavaScript のトラブルシューティング

13. Greasemonkey —— スクリプト アプレット

14. ファイアクッキー —— クッキー

【Chromeプラグイン】

1. 素晴らしいスクリーンショット —— Web ページのスクリーンショット

2. user-Agent Switcher —— 表示デバイスを切り替えます

3. Web 開発者 —— Web ページの関連情報を確認します

4. ウィンドウ サイズ変更 —— 解像度を変更します

5. YSlow —— Web ページ評価ツール

6. ブラウザ互換性の検出

[フロントエンド開発によく使用される URL ツール]

ウェブカラーマッチング

http://www.peise.net/tools/web/

http://www.peise.net/tools/lilun/lilunxuexi.html

http://www.colorschemer.com/online.html

http://www.workwithcolor.com/hsl-color-picker-01.htm

CSS3 ジェネレーター

http://www.css3maker.com/

http://www.flickyard.in/autocss3/

http://www.colorzilla.com/gradient-editor/

http://css3pie.com/

http://www.css3.me/

http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/

CSS3 ボタンジェネレーター

http://www.wordpressthemesshock.com/css-drop-shadow/

http://css3buttongenerator.com/

CSS 画像コンポーザー

http://csssprites.com/

http://cn.spritegen.website-performance.org/

CSS コード検査

http://csslint.net/

ajax 読み込みイメージ

http://ajaxload.info/

http://preloaders.net/

CSS ハックテーブル

http://centricle.com/ref/css/filters/

ブラウザ マーケット

http://tongji.baidu.com/data/browser

ブラウザの CSS3 サポートをテストします

http://css3test.com/

http://kimblim.dk/css-tests/selectors/

http://selectivizr.com/

http://www.findmebyip.com/litmus

ユーザーエクスペリエンスを検出

http://gtmetrix.com/

CSS テンプレートジェネレーター

http://blog.html.it/layoutgala/

http://www.mycelly.com/

http://www.intensivstation.ch/en/templates/

CSS 圧縮

http://www.csscompressor.com/

一般的な CSS フォント

http://cssfontstack.com/

http://www.google.com/webfonts#

http://www.dafont.com/

CSS3 変換

http://www.useragentman.com/IETransformsTranslator/

CSS3 ベジェ曲線

http://cubic-bezier.com/#.47,.73,1,.41

YUI CSS グリッド ツール

http://developer.yahoo.com/yui/grids/builder/

JavaScript コードの最適化と美化

http://js.clicki.cc/

コードデモ

http://jsfiddle.net/

http://jsbin.com/#html,live

http://ikeepu.com/bar/20143449

http://codepad.org/

プロトタイプ設計ツール

https://gomockingbird.com/mockingbird/#

http://www.jotform.com/

[ローカルで一般的に使用されるソフトウェアおよび IDE エディター]

1. MarkMan —— フロントエンドエンジニアの必需品

2. VIM —— 超高速エディタ

3. Adob​​e PhotoShop CS6 —— 画像カット専用

4. IE テスター —— ページの互換性を確認します

5. Fiddler2 —— 検出リクエスト

6. Comppar を超えて —— ファイル比較

7. GIT —— 分散バージョン管理

8. Opera モバイル エミュレーター —— モバイル ブラウザー

9. シンプル —— レス

上記のツールのほとんどをマスターできたことおめでとうございます。あなたは優れたフロントエンド デザイナーになるまでそう遠くありません~~