Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
省電力を抑制するchrome.power APIが利用可能になりました
省電力を抑制するchrome.power APIが利用可能になりました Written on Jun 19, 2013. Posted in Chrome extension 「操作はしていないけれど、画面を表示しっぱなしにしておきたい」という場面があります。例えば、プレゼンテーションの真っ最中とか、電子書籍を読んでいる時などです。そのような種類のアプリや拡張機能をChrome向けに作った際に、 chrome.power APIを使うことで、一時的に省電力に入ることを抑制することが可能です。 Chrome 27から、アプリと拡張機能の両方でchrome.power APIを使うことができます。そのAPI Referenceを和訳してみましたので、下に掲載します。 ただし、あくまでこのAPIは「一時的に」使うべきです。省電力モードへの移行抑止は、最低限にとどめましょう。何のための省電力なのか
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
Chromeを最強化するオススメ拡張機能11
人気ブラウザー『Google Chrome』。拡張機能は数多くあるけれど、まず最初に入れておきたい11の拡張機能を紹介。すべてフリーで導入することができる。快適かつ最強にパワーアップしたChromeを使いこなそう！ ●関連サイト Google Chrome 『Incredible StartPage』 スタートページをカスタマイズ！ シンプルなクロームのスタートページを、機能的な画面にする拡張機能。ブックマークやウェブアプリ、最近閉じたタブが見やすくなる。 ●関連サイト Incredible StartPage バージョン 1.4.3 作者 www.visibotech.com 『Chrome用TooManyTabs』 大量タブを開くときに絶対必要な拡張機能！ 大量のタブをサムネイルで一覧で表示、目的のタブを簡単に選び出せる。並び替えや検索機能もあり、タブを閉じるのがめんどうな人にオススメ
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
快適キーボードショートカットChrome拡張機能「Keyconfig」の設定方法 | nori510.com
chromeエクステンションにアテンションプリーズ。どーもノリ五藤( @nori510 )です。 トラックパッドを「BetterTouchTool」で拡張して、chrome拡張機能「Keyconfig」でキーボードショートカットを設定してのブラウジングに慣れてしまうと、二度とコレ無しの生活には戻れなくなってしまうこと請け合いの良エクステンションです。 という事で、超快適にキーボードショートカットでお助けしてくれる、素晴らしいChrome拡張機能「Keyconfig」のご紹介をさせて頂きます。 超絶快適キーボードショートカット！ Chromeエクステンション「Keyconfig」 chromeへのインストール まずは、chromeへのインストール。 オプションで設定 インストールが済んだら、あとは設定。簡単に設定方法をご説明します。 chromeの「拡張機能」から、「Keyconfing」の
Chromeでフローチャートやマインドマップを簡単に作図できる LucidChartで遊ぼう!! - 週刊アスキー
『LucidChart』はブラウザー上でさまざまな図を手早く簡単に作成できる作図ツールだ。豊富なテンプレートを元に、さまざまなシェイプをドラッグ・アンド・ドロップで配置。シェイプどうしを線でつないだり色分けすることで、専用ソフトにもひけを取らない本格的な作図を行なえる。
Google製スクリーンキャプチャー拡張 "Screen Capture" に乗り換えた！ - Gadget Girl
Vitsoe design store | Otl Aicher exhibition / EVERYDAYLIFEMODERN 以前、WindowsでもSkitch的に使えるChrome拡張として Awesome Screenshot を紹介しました。ウェブページのスクリーンショットをとって、説明を入れることができます。 ただ、最近使ってみたところ、なぜか一部の機能がうまくいかなかったのです。 そこで今日は、 Awesome Screenshot から乗り換えた Screen Capture (by Google) を紹介します。 Chrome ウェブストア - Screen Capture (by Google) 使い方は、Awesome Screenshotと同じです。 ページの一部を切り取る ページの見えている部分を切り取る 見えていない部分も含めてページ全部を切り取る を選べます
Evernoteをフル活用するためのGoogle Chrome拡張機能 + ウェブアプリまとめ | フリーソフト,Windows PC活用情報局
クリエイティブでライフハッキングなインターネットユーザーの間で今一番熱いツールと言えば、ズバリ、Evernote！そう、そんな素敵なEvernoteをフル活用するための、まだまだ知らない便利なGoogle Chrome拡張機能が実はたくさんあったんです！ というわけで今回は、Evernoteの利用に関連するGoogle Chrome拡張機能・ウェブアプリを、ざっとまとめてご紹介！今を時めくEvernoteを、今一番熱いウェブブラウザでもっともっと使い倒して、あなたのクリエイティブでライフハッキングな生活により一層磨きをかけましょう！ Evernote Web Clipper ウェブページを丸ごとEvernoteに保存したり、指定した範囲を切り取って保存できる、Evernoteユーザー必須の拡張機能。ノート内の検索も可能。 Clearly（提供終了） ウェブページの広告等をカットして記事本文
爆速ブラウザ・Google Chromeがさらに便利になる7つの技
① ブックマークバーのショートカットをアイコンのみにすると見やすいChromeにブックマークを登録する（アドレス横の☆マークをクリックする）際、ブックマークバーに登録する人もいると思います。 通常は、アイコン＋サイトの名前で登録するのですが、このときにサイト名を空欄で登録してみましょう。 すると、このようにアイコンのみでブックマークが並びます。 ブックマークバーにたくさん登録したいときに場所を取りませんし、見た目もスッキリ。 ② アドレス欄に直接キーワードを打ち込んで検索できる。カスタム検索も可能知っている方も多いと思いますが、ChromeはURLが表示されている欄に直接キーワードを打ち込めばGoogle検索可能。 検索結果がすぐに表示されます。 Chromeの検索機能はこれだけではなく、「カスタム検索」も可能。 これはどういうものかというと、特定のサイト内（例えばYahoo、Amazon
Chromeの「シークレットウィンドウ」はWeb開発にとても使える
皆さん、Google Chrome の「シークレットウィンドウ」使ってますか？ Google Analytics を見る限り、このブログでは Google Chrome がトップシェアですが、周りの方に話を聞いてみると、残念ながら Google Chrome の「シークレットウィンドウ」機能はそれほど使われていないようです。 あれほど Web 開発に使える機能は他にないのに…と残念に思っていても仕方ないので、活用方法をまとめて記事にしてみました。 目次 まずは基本の使い方 Webサービスにログインしている状態としていない状態を同時に確認 Webサービスに2つのアカウントで同時にログイン Webページの表示がおかしい時は、まず「シークレットウィンドウ」で確認 検索エンジンでの順位チェックは「シークレットウィンドウ」で ニコニコ動画が何度もエラーになる時は「シークレットウィンドウ」で まずは基
ディレクターの日常業務で役立つGoogle Chromeのアドオン10個 : LINE Corporation ディレクターブログ
ディレクターの渡邉雄介です。 皆さんは仕事中にどんな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ほど便利なアドオン (機能拡張) がありませんでした
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
TechCrunch | Startup and Technology News
「Google Chrome Deveoper Tools」はこう使う！ 基本機能チュートリアル & GDD 2011 セッション概要
Chromeのキャッシュをオフにする方法 :: 5509