知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
なにこれ、スゴすぎる！ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張 -Wildfire
ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ
知っていると少し幸せになれる、Chrome検証機能の小技まとめ - Qiita
みなさんブラウザは何を使っていますか。 僕はchromeです。 今回はchromeの検証の便利な機能を紹介したいと思います。 各種ショートカットキーはMacのものです。 何か便利小技が増えたら、ここに追記していこうかと思います。 1. 拡大縮小 拡大：「command」 + 「shift」 + 「+」 縮小：「command」 + 「-」 元の大きさに戻す：「command」 + 「0」 通常のブラウザの拡大・縮小と同じ 2. 上下キーで値の変更 Shift+↑ 10の増減 Alt+↑ 0.1の増減 3. 色をカラーピッカーから選択 カラーピッカーから色を選択できます。 さらに以前はchromeの拡張機能からしかできなかったような、サイト上から色を選択してとってくることもできます。 透明度も変更できる 4. minify化しているファイルを整形 minify化されているようなファイルを整形
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選 - ポップインサイト
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
古いノートPCをChromebookとして復活させてくれるアプリ『CloudReady』 | ライフハッカー・ジャパン
Chromebookを久しく使っていないみなさん。Chromebookが大きく進化を遂げたことを知っていますか。でも、Chrome OSを試してみたいというだけの理由で、わざわざお金を払って新しいノートPCを買う必要はもうありません。『CloudReady』というアプリケーションのおかげで、ほぼどんなノートPCにもChrome OSをインストールできるのです。 正確には、インストールできるのはChrome OSではなく、そのオープンソース版である『Chromium OS』です（Google社が設計したものなので、心配は無用です）。しかも、Neverware社のCloudReadyを使えば、たいていのノートPCに、これ以上ないくらい簡単にChromium OSをインストールできます。ドライバーをあれこれいじったり、対応するハードウェアを探したりする必要もありません。クリックするだけでインスト
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
日々の業務やWeb制作に役立つ！おすすめChromeプラグイン12 - Design Color
日々の業務に活躍 毎日のタスクを管理！「Any.do Extension」 まずは先週も好きすぎて記事にしてしまった「Any.do」。何か頼まれごとをされた時に、タスクをサッとメモをとることが出来るので重宝しています。リマインド機能もバッチリついているのが嬉しいところ。Gmailとの連携などもでき、かゆいところに手が届くプラグイン。
Chromeから無料でナショジオ風に写真をオフライン加工できる「Polarr」
プライベートで撮影した写真は形ある思い出となりますが、全ての瞬間をプロのカメラマンのような躍動感のある美麗な写真に仕上げるのは難しいもの。そんなデジタルカメラで撮影した画像を多彩なフィルターや詳細な設定によって美しく加工でき、「ナショナルジオグラフィックで働いているの？」と言われてしまうかもしれない無料の写真加工ツールが「Polarr Photo Editor」。オフラインで使えるChromeアプリ版「Polarr Photo Editor RAW」と、オンラインでさらなる機能が使える「Polarr Online Editor」を実際に使ってみました。 Polarr Photo Editor RAW - Chrome ウェブストア https://chrome.google.com/webstore/detail/polarr-photo-editor/djonnbgfieijldciea
GoogleドライブをDropboxよりパワフルに変身させる7つのツール | ライフハッカー・ジャパン
Chrome拡張機能／アプリと連携させることによりGoogleドライブはよりパワフルになります。最大のライバルDropboxよりも便利になるかも。以下7つのツールを使ってあなたのドライブをもっと使いやすいものにしてみましょう！ Chromeアプリ マイナーだけどすこぶる便利なChrome用アプリを以前取り上げましたが、Googleドライブとの連携によりできることはもっと増えます。 1.Drive Notepadでテキスト編集 『Drive Notepad』はChrome上でテキスト編集ができるアプリです。作成したファイルはGoogleドライブに保存されます。GoogleドライブのWindows版を使えばローカルの『メモ帳』からの直接編集が可能です。 2.WeVideoで動画編集 『WeVideo』は動画編集をChrome上で可能にするアプリです。動画をドライブ上に保存しておけば、どこからで
samulife.com - samulife リソースおよび情報
samulife.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、samulife.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
Google Chromeを3年使い続けて辿り着いたベストな拡張機能14個 – 和洋風KAI
どうも！Google Chrome歴3年と9ヶ月のするぷ（ @isloop ）です。 今日はちょっと僕が今使っているスーパーおすすめのGoogle Chrome拡張機能をご紹介しようかなと思います。 いまやChrome拡張機能は、もう数え切れないくらい出ていて便利なものも多いですが、むやみやたらに入れすぎても動作が遅くなってしまいます。 そういうことで「無駄な拡張機能は絶対いれん！」と、なるたけChromeをシンプルにするように3年間心がけてきました。 しかし、「これはどうしても捨てることはできん！無理！だって便利なんだもん！」というのが今回ご紹介するベスト14のChrome拡張機能でございます。 というわけで、この記事がGoogle Chrome拡張機能難民の方々に少しでも参考になれば幸いです。ではいってみましょう！ ウェブ閲覧がラクになるGoogle Chrome拡張機能 Keycon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新入社員がほぼ１年間のWeb開発を通して躓いたこと30選 - Qiita
作業効率が3倍になる！絶対に入れておくべき、Chrome拡張機能おすすめ10選 | iPhoneの神様 - iPhone X・iPhone8最新情報
日経有料記事の類似記事を無料で読めるChrome拡張をES6+Webpackの最小構成でつくった - Qiita
読み手に伝わりやすく！ブログに説明図を入れるときに便利な無料ツールまとめ
Ptengineウェブ運営All-in-Oneプラットフォーム | ウェブの改善や改善業務はこれひとつで完結
Slideshareを最後まで見ると勝手に次のスライドに移動する超ウザ機能を殺す - Qiita
【必見】Linux歴15年の俺氏、オススメソフトを紹介して普及を目指す！ : ニュース30over
tande lab.
