Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana
縦長サイトの画面キャプチャは「Awesome Screenshot」で！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、岩上です。 職業柄、提案資料やワイアーフレーム、サイトマップなどの資料を作ることが多いです。それに加え最近、大手企業様へプレゼンをする機会が増えて今までより一層、たくさんの資料を作っています。 資料作りをする中で、参考サイトやプロモーション例などブラウザでキャプチャーを取ることが多いのですが、スクロールする長い画面だと見えている部分しかキャプチャーが取れずに困っていました。スクロールが長いサイトだと一画面毎に切り貼りしていました。 そんなことをディレクターチームに相談したら、ナントありました。画面全てをキャプチャーできるChromeプラグイン。これが結構便利なので紹介したいと思います。 使い方 1. まずはダウンロード 下記ページへ飛んで、ダウンロードボタンをクリック。 Awesome Screenshot キャプチャーと注釈 – Chrome ウェブストア： https://
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromeのメモリを自動開放してくれる拡張機能「Tab Memory Purge」 | フリーソフトラボ.com