フロントエンド開発一般マニュアル(ツール、Webサイト、経験などを含む)

フロントエンド開発一般マニュアル(ツール、Webサイト、経験などを含む)

今日は何もすることがなかったので、いくつかのツール(オンラインとクライアント)、よく使用する URL、および経験の概要をリストにして、皆さんと共有します。このタイトルはちょっと範囲が広すぎて、カテゴリの分類があまり考慮されていないなど、記載されていないことがたくさんあるはずですので、積極的に追加・修正してください。直接メッセージを残すか、私にメールを送ってください(sorrycc#gmail.com)。 「人気」という言葉が付け加えられているのは、以下のリソースが専門家にとってはすでによく知られている可能性があるからです。

また、ツールは静的なものであり、ツールが役に立つかどうかは、その使い方を知っているかどうかによって決まるということも述べておきたいと思います。たとえば、Firefox、Fiddler などには、明らかな機能に加えて、半分の労力で 2 倍の結果を得るのに役立つ小さなトリックがいくつかあります。

更新ログ:

  • [20081025] 初版

クイックナビゲーション:

  • オンラインツールセット
  • 一般的なFirefoxプラグイン
  • IE のデバッグ ツール
  • リファレンスマニュアル
  • バッチ処理ツール
  • IDEおよびその他のツール
  • ブックマークレット
  • フロントエンド開発者コミュニティと権威あるウェブサイト
  • 購読をおすすめするブログやウェブサイト

さらに、リソースを 1 つのメニューに統合して簡単に検索できるようにする「フロントエンド開発ツールセット」という Firefox プラグインを開発しました。データはオンライン(Google AppEngine)上に配置されるため、速度が保証され、更新もより便利になります。

オンラインツールセット

  • 書籍:
    • Book Shelf 2.0 ベータ版 —— おすすめ、明確な分類、ダウンロードが簡単
    • 予約しよう!
    • オリジナル書籍の無料ダウンロードリンク集サイト
    • 51CNNET.NET
  • JavaScript クラス:
    • JavaScriptを美しくする - JavaScriptのフォーマットツール、効果は非常に理想的です
    • AJAX ライブラリ API
    • 正規表現テスター
    • Compressor Packer - 以前は JS を圧縮するためにこれを使用していましたが、TBCompressor を入手してからは使用しなくなりました。
  • CSS クラス:
    • CSS セレクターのパフォーマンステスト
    • CSSTidy - CSS フォーマット ツール
    • CSS コンプレッサー
  • 他の:
    • GUID ジェネレーター - 何かを行うときに一意のリソース識別子が必要な場合に使用します (Firefox プラグイン)
    • W3カウンター
    • WebWait - ウェブサイトのベンチマーク

一般的なFirefoxプラグイン

  • AlipayのセキュリティコントロールとWangwangプロトコル - オンラインショッピング専用、Firefox + Pufaオンラインバンキング、無敵
  • Firebug - これは説明の必要もありませんが、空白スペースのある外部エディタの修正版です。
    • Firecooike——クッキーの表示と編集をサポート
    • Jiffy - パフォーマンスのデバッグ用。使用が面倒なので試していません
    • YSlow - なぜスローなのか? by YUI
    • Pixel Perfect — デザインをFirefoxに直接ドラッグして比較します
    • Firebug の Rainbow - JS のハイライト、パフォーマンスはあまり理想的ではない
  • Fiddler Switch - Taobao UED の Kongwei のおかげで、Firefox での Fiddler の切り替え操作が簡単になりました
  • ウェブ開発者
  • DevBoi——HTML、DOM、JavaScript などのマニュアルをサイドバーに配置します。サイドバーはショートカット キー Ctrl+F9 でカスタマイズおよび追加できます。その他のパッケージについては、こちらをご覧ください。
  • RefControl - 各サイトに必要なHTTPリファラーを送信します
  • GreaseMonkey - ウェブサイトに満足できない場合は、小さなスクリプトを書いて最適化することをお勧めします。
  • HttpFox - IE の HttpWatch と同様に、現在の HTTP 接続ステータスを表示します。
  • ユーザーエージェントスイッチャー - ユーザーエージェントを切り替える。iPhone版とWeb版を同時に開発するときに非常に便利
  • FoxyProxy - プロのプロキシ発行者と調和して動作するファイアウォール貫通ツール

IE のデバッグ ツール

  • Fiddle2 は非常に強力な http ストリーム表示ツールです。デフォルトで IE をサポートしています。他のブラウザでは、{Document}\Scripts\BrowserPAC.js をプロキシとして設定して使用できます。 Firefoxでは、上記の「Fiddler スイッチ」を使用してすばやく切り替えることができます。プラグインをサポートします。
  • IE 開発者ツール バー - 要素の表示、キャッシュの無効化、CSS\JS の無効化、要素のアウトライン、生成されたソース コードの表示などの機能。IE8 には拡張バージョンが付属しています。
  • Microsoft Script Debugger + Companion.JS - JS のデバッグに使用します。エラー レポートにはまだいくつかのエラーがありますが、満足しています。インストール順序は、Microsoft Script Debugger、Companion.JS の順で、"IE オプション - 詳細設定" でスクリプトのデバッグを無効にするチェックを外します
  • 複数のバージョンの IE を共存させるには、次の 2 つの解決策があります。
    • IE7/8 + IE Tester - 人気のある構成で、基本的に日常のニーズを満たすことができます。
    • IE6 + Internet Explorer コレクション - IE 6 ユーザーが絶対多数を占め、IE 6 が魔法のバグでいっぱいの時代でも、私はこのソリューションを推奨します。魔法のオリジナルの IE 6 だけが、動作上の魔法の問題に耐えられるからです。さらに、他のマシンを利用できる場合は、IE 8 + IE Tester をインストールすることをお勧めします。IE 8 の開発者ツールバーは大幅に改善されており、デバッグがより便利になるためです。
  • 次の 3 つのソフトウェアは比較的重要ではありません。
    • HttpWatch - http ストリームの視聴
    • インスタントソース - JSによって生成されたソースコードを表示できます
    • NetLimiterPro - インターネット速度リミッター

リファレンスマニュアル

  • XHTML、CSS、DOM W3C マニュアル - Yu Bo がコンパイルしたバージョンで、W3C マニュアルやその他の役立つ資料が含まれています。
  • Su Yu の CSS 中国語マニュアルと Dom 中国語マニュアル
  • JScript 言語リファレンス
  • XML ガイド
  • XMLHTTP リファレンスマニュアル
  • jQuery 1.2.6 API と jQuery および jQuery UI リファレンス 1.2
  • Apache 2.2 中国語リファレンスマニュアル オンライン版
  • MySQL 5.1 リファレンスマニュアル (オンライン版)
  • PHPマニュアル
  • YUI チートシート
  • チートシートまとめ - 開発者向けのチートシート 30 種類以上
  • 23 チートシート パッケージのダウンロード

バッチ処理ツール

  • TBCompressor —— Taobao UED 用の JS/CSS 圧縮ツール。詳細は Yu Bo の紹介をご覧ください。
  • pngOptimizer —— PNG最適化ツール
  • jpegTran - jpeg 冗長メタ削除ツール

IDEおよびその他のツール

  • Editplus v301 中国語版
  • トータスSVN
  • Apache + PHP のモバイル版 - 非常に使いやすく、非常にモバイルです。Mingcheng の手順を参照してください。

ブックマークレット(右クリックして保存)

  • Firebug Lite - 公式紹介
  • Xray - 公式紹介
  • MRI - 公式紹介
  • '+ window.document.documentElement.outerHTML+ ”">生成されたソースコードを表示します。'+ window.document.documentElement.outerHTML+ ”);})()">新しいウィンドウを開いて、生成されたソースコードを表示します——IE の場合

開発者コミュニティと権威あるウェブサイト

  • Mozilla 開発者センター (MDC)
  • YAHOO! 開発者ネットワーク (YDN)
  • Dev.Opera
  • Apple デベロッパー コネクション
  • マイクロソフト
  • IBM Developers China (Web フロントエンド開発テクノロジーのトピック)
  • ウェブキット
  • AOL 開発者ネットワーク
  • SlideShare - PPT を共有 —— オンライン PPT 共有、豊富なリソース
  • Google Doctype - ウェブ開発者の百科事典
  • W3C (香港、中国)
  • ポジションがすべて
  • HTML 犬
  • ウィキペディア

購読をおすすめするブログやウェブサイト(順不同)

  • 外国
    • コンテンツ集約: A List Apart、Ajaxian、Smashing Magazine、456 berea street、Script & Style、CSS Globe、CSS-Tricks、SitePoint
    • チームブログ: Yahoo! ユーザーインターフェースライブラリ (YUI)、IEBlog
    • 個人ブログ: John Resig、PPK: QuirksMode、Douglas Crockford、Dean Edwards、Nate Koechley、Julien Lecomte、Eric A. Meyer、Andy Budd、Steven Levithan、HedgerWow
  • 国内
    • コンテンツ集約: Blueidea、Worry-free script、Webデザイナー(W3CN)、JavaScriptチュートリアルネットワーク
    • チームブログ: Taobao、Koubei、Alibaba International、Alibaba Chinese、Alibaba Chinese フロントエンド開発チーム (Fangdeng)、Alimama、Alipay、Alisoft、19th Floor、Jiutian Music、Kingdee、Youshang.com
    • 個人ブログ、ここにオリジナルで比較的頻繁に更新されているブログがあります。漏れがある場合はお知らせください (sorrycc#gmail.com):Yifei、Good Luck、Realazy、old9 (壁を通り抜ける必要がある)、Beach Sandals (Kongwei)、The Legend of the Condor Heroes (Yu Bo)、Aether、Zhenzhi、Aoao、JunChen、Exploding Teeth、Qin Ge、Kejun、5key、Xiaozhi、Rage (Zhengchun)、Maiji、Yunlie、Lao Mao、Tomato is Red、Joyqi、Luli、CSS Forest (Ghost)、Twinsen、Gulu77、Rlog、Dlog、Rat、Xifengfang...

<<:  CSSはフロントエンドの画像変形の問題を完璧に解決します

>>:  JavaScript配列の一般的なメソッドの詳細な説明

推薦する

ページ切り替え効果を実現するJSコード

この記事の例では、ページ切り替え効果を実現するためのJSコードの具体的なコードを参考までに共有してい...

HTMLフォーム要素の詳しい解説(パート2)

HTML 入力属性値属性value 属性は、入力フィールドの初期値を指定します。 <フォーム...

CSS リスト モデルでのマーカー タグの使用

この記事では主に、 list-itemの下にある::master疑似要素、 list-style-i...

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...

Centos 7 システムの Tomcat サーバーの詳細な分析

目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...

Apache クロスドメイン リソース アクセス エラーの解決策

多くの場合、大規模および中規模の Web サイトでは、静的リソース (フォント ファイル、画像など)...

React Contextの理解と応用についてお話ししましょう

目次序文React Context の初見コンテキストの使い方コンテキストを直接取得できるいくつかの...

MySQL 8.0.23 インストールの超詳細なチュートリアル

目次序文1. 公式サイトからMySQLをダウンロードする2. 解凍ファイルを設定する3. 初期化4....

MySQLは文字列の連結、インターセプション、置換、位置検索操作を実装しています

MySQL 文字列の連結、インターセプト、置換、および検索位置。よく使用される文字列関数:関数例示す...

Mysql 主キー UUID と自動増分主キーの違いと利点と欠点

導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...

ローカル写真をアップロードする前にプレビューコード例を実装するための HTML5 と jQuery

HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...

MySQLはパスワードなしでログインする例を実装しています

具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...

Vueはテーマ切り替えのための複数のアイデアを実装します

目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...

Tencent Cloud で HTTPS を無料で導入する方法

最近、WeChatアプレットを書いていたとき、WeChatアプレットではすべてのリクエストインターフ...

MySQL テーブルを削除する際の I/O エラーの原因分析と解決方法

問題現象最近、sysbench を使用して MySQL をテストしました。テストに長い時間がかかった...