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

President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. Chrome Developer Tools (also known as

Win/Mac対応、Chromeで表示したWebページのUIエレメントのサイズやマージンが簡単に計れてしまう無料の機能拡張を紹介します。 Webページだけでなく、画像をChromeで表示すれば画像も計ることができます。

Chrome Office ViewerはGoogle Chrome上でオフィスファイルを閲覧する機能拡張です。 ビジネスの場ではオフィスファイルのやり取りがとても多いです。そうしたファイルを都度ExcelやWordを立ち上げるのは面倒に感じる人も多いでしょう。そこで閲覧についてはGoogle Chromeで行ってしまいましょう。それがChrome Office Viewerです。 インストールを行います。β版以上のChromeのみ対応しています。 Excelファイルを表示した例です。アドレスバーの上がHTMLファイルになっているのが特徴です。 パワーポイント。再現率は結構高いです。 ワードドキュメント。こちらもある程度見られます。 Chrome Office ViewerではOfficeファイルをそのまま読むという訳ではなく、一旦HTMLファイルに変換して描画しているように見えます。なお

こんにちはLatinです。もうすぐ世界が終わるらしいのでバシャログ。も今回が最後のエントリーになりそうです･･･。 あ、万が一終わらなかったらもちろんブログは継続していきます。（汗） 今回はChrome Developer Tools のエントリーのまとめです。 私自身はこれまで Firefox の Firebug を使っていましたが、やはりあの重たいブラウザ動作がイヤになり、 自然と Chrome を立ち上げる機会が増えていきました。 Firebug も Chrome Developer Tools も基本的に出来る事は同じなのですが、UI が変わっただけで結構最初は使い辛い印象をもったりしますよね。 そんな使い初めの時に参考にさせていただいたエントリーを紹介とともに、まとめさせていただきました。皆様、ありがとうございますです。 ～入門編～ 動画レッスン　Chrome Developer

動きが速く、なおかつ高機能なことが売りのGoogle Chromeですが、使っているうちに重くなってきてしまうのは、どのブラウザでも同じこと。どうしても使い勝手が悪く感じるようになってしまいます。 重くなる原因には、ブラウザやアプリのキャッシュやcookie、閲覧やダウンロードの履歴など、さまざまなものがあります。 今回は、このようにゴミが溜まっている状態を開放し、Chrome本来の動きを取り戻してくれる拡張機能をご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! Chromeにたまったデータをワンクリックで削除できる拡張機能 「OneClick Cleaner for Chrome」は、Google Chromeのプロファイルに溜まっている不要なデータをワンクリックで削除することがで

よく使うWEB画面を整理整頓するための原点と言えるブラウザのブックマーク。最近では、固有のアカウントを使うことによって、複数のデバイスでブックマークを同期できるようになっていますよね。 今回は、そんなブラウザのブックマークを「タグ」で管理することができるChrome拡張機能をご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! ブラウザのブックマークをタグで管理できる「Bookmarks Tagger」 「Bookmarks Tagger」は、Google Chromeでブックマークにタグを付けて管理できる拡張機能。 ブラウザのブックマークとは別で管理され、ブラウザのブックマークをインポートして使うことも可能になっています。 ブックマークにタグを付けられる ↑Firefoxやソーシャルブ

Hands-on with the new iPad Pro M4: Absurdly thin and light, but the screen steals the show

GRIwsomeはGoogleリーダーのアイテムをその場で開けるChrome拡張機能です。 Googleリーダーでフィードを読んでいるときに、 新しくタブを開いて詳細を確認することが面倒なときってありますよね。 そんなときに便利な拡張機能です。 その場でフィードの詳細を見ることができます。 さらに全画面表示にして、次々とフィードを実際のページで閲覧することもできます。 以下に使ってみた様子を載せておきます。 まず「GRIwsome」にアクセスしましょう。 Chromeにインストールします。 このようにGoogleリーダーの各フィードの先頭に虫眼鏡マークが付きます。 すると、その場で実際のページを開くことができますよ。 全画面表示にすると、最上部にバーが付きます。（上記画像だと見づらいですが…） 「prev」「next」ボタンがあるので、そのまま次々とフィードを実際のページ上で読んでいくこと

ドットインストール代表のライフハックブログ

どーもノリ五藤( @nori510 )です。 ブログを書く上で、どうしても必要な手間がかかる部分があります。リンクを貼ったりとか、HTMLのタグうちなど。 そういう手間は、なるべく減らしたい。 という事で、今回はブログ更新の手間を減らす私がブログ更新に使用している便利なbookmarkletをまとめてご紹介してみようと思います。 ブロガーに必須のブックマークレット まとめ その0 ブックマークレットを超絶快適に使う為のChrome エクステンション『Keyconfig』 まず、PCでブックマークレットを使用する時などに、ほんとに素晴らしい働きをしてくれるchromeの拡張機能『Keyconfig』をご紹介させて頂きます。 ブックマークレットを語る上でコチラは欠かせません。 キーボードショートカットをブックマークレットの起動に割り当てれば、超快適にブックマークレットを使用できます。 使用頻度

Terminal for GoogleはGoogleの各種サービスへのリンクをまとめたChrome拡張機能です。 Googleサービスをよく使う方には便利な拡張機能ですよ。 ワンクリックでお気に入りのGoogleサービスのリンク一覧を出してくれます。 ツールバーにはTerminal for Googleのみ表示されるのですっきり。 以下に使ってみた様子を載せておきます。 まず「Terminal for Google」にアクセスしましょう。 Chromeに拡張機能をインストールしましょう。 このようにTerminal for Googleをクリックすると、Googleサービスが一覧で表示されます。 クリックすると、そのサービスへアクセスします。 また、表示させるサービスは拡張機能のオプションで変更できますよ。 お好みに応じて使いやすい表示にカスタマイズしましょう。 Googleサービスをよく

皆さん、Google Chrome の「シークレットウィンドウ」使ってますか？ Google Analytics を見る限り、このブログでは Google Chrome がトップシェアですが、周りの方に話を聞いてみると、残念ながら Google Chrome の「シークレットウィンドウ」機能はそれほど使われていないようです。 あれほど Web 開発に使える機能は他にないのに…と残念に思っていても仕方ないので、活用方法をまとめて記事にしてみました。 目次 まずは基本の使い方 Webサービスにログインしている状態としていない状態を同時に確認 Webサービスに2つのアカウントで同時にログイン Webページの表示がおかしい時は、まず「シークレットウィンドウ」で確認 検索エンジンでの順位チェックは「シークレットウィンドウ」で ニコニコ動画が何度もエラーになる時は「シークレットウィンドウ」で まずは基

ディレクターの渡邉雄介です。 皆さんは仕事中にどんなWebブラウザを利用していますか？ 私の周りは一昔前はFirefoxが多かったのですが、最近はGoogle Chromeをメインで使っている人が増えてきた気がします。 Webブラウザのシェアを調べてみると、10月時点で国内ではChromeが2位のFirefoxに迫る勢い (世界的にはすでにFirefoxを抜いて2位) ということで、今後のWeb開発においてはChromeの存在も無視できない存在になってきたのではないでしょうか。 ※参考: ChromeブラウザシェアがFirefoxを抜いて2位に！IEを抜いてシェアトップになるのは2012年5月中旬頃の予想 | Chrome Life 私自身も1年ほど前にメインで使うブラウザをFirefoxからChromeに変えました。以前はFirefoxほど便利なアドオン (機能拡張) がありませんでした