[B! Chrome] jaga291のブックマーク

Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ

先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。デベロッパーツールの便利な使い方タブ「Elements」を選択 DOM要素を選択右パネルのタブ「Computed」を選択「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。これは大きなサイトを制作している時に、非常に有用です。

jaga291 2015/10/30

リンク

Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック

Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集指定した行番号に移動すべての子ノードを展開デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット複数のカーソル画像をData URIとしてコピー疑似クラスのトリガー複数のコラムをドラッグで選択「$0」で現在の要素を手に入れる要素の表示「Event Listeners」の表示イージングのプレビュー Media Queriesの検証ネットワークをフィルム

jaga291 2015/09/25

リンク

業務スピードが上がる！Google Chromeのおすすめ拡張機能9選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。Google Chrome（グーグル・クローム）をこよなく愛する男、鮫島です。仕事でもプライベートでもChromeを使いまくっているのですが、今回は超絶便利なChromeの拡張機能（エクステンション）をいくつかご紹介します。これを全て使いこなせれば、業務の効率は確実に上がるので、特にWeb制作のディレクターの方にオススメですよ！もちろんディレクター以外の人も使える拡張機能はたくさんあるので参考になれば！そもそもGoogle Chromeの拡張機能（エクステンション）ってなんなの？一言で言うと、Chromeに機能を追加するためのもの。Chromeにはいろいろな拡張機能が用意されていて、インストールすると、ページ全体のキャプチャを撮ったり、不必要な広告をブロックしたりする機能を追加できます。Google Chromeのデフォルトの機能で物足りない方にオススメです。人によっては、