Chrome DevToolsを使いこなしてフロントエンド開発を加速させる
Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保
ブラウザ自動操作技術の深層へ、直接触れて学ぶ WebDriver と Chrome DevTools Protocol
ウェブアプリケーションの開発においてE2Eテストの自動化は身近なトピックです。SeleniumやPuppetter、PlaywrightやAppiumなどがブラウザ・ネイティブアプリの自動操作のOSSとしてよく挙げられます。しかし、それらの裏側はご存知でしょうか？ 本トークではこれらのツールの背後…
Chrome OS 10周年 - Nothing ventured, nothing gained.
子供たちが僕たちが作ったChromebook (ChromeOS) でプログラミングを学んでいる (Codemonkey)。涙が出そうになった。 #STEAM前原小 pic.twitter.com/uhqUvpgSDT — 及川卓也 / Takuya Oikawa (@takoratta) November 26, 2016 Chrome OSが10周年を迎えたようだ。おめでとう。 Chromebook turns 10 東京にChromeチームが立ち上がりかけていた頃、将来計画などを説明に来ていた本社マウンテンビューのディレクターからOSを作ることを考えているという話を聞いた。Webに最適化されたOSが必要だと熱く語ったそのディレクターは東京のChromeチームの設立の支援者でもあり、東京にもそのOS開発チームを作りたいと言っていた。六本木ヒルズ近くの居酒屋だったと思う。2009年の頃だ
Secure DNS によるプライバシーの高い安全なウェブ ブラウジング
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
今更だけどChromePlusが便利な１２の機能と使い方
今回紹介したいのは、Chromeを主体に若干の変更を加えてリリースされているオープンソースプロジェクトのChromePlus。ブラウザです。 CoolNovo ChromePlus 2009年あたりから日本でも結構利用者を拡大してきてはいるものの、たまーにアップデートでお気に入りがふっとんだり、IEタブ機能にバグがでたりと、私も避けてきました。 しかし、使っていくうちに利便性が非常に高いため、今はChromePlusがほぼメインになっちゃってます。 さて、ChromePlusと言えば、「左にお気に入りを表示できるChrome」として有名になったのですが、それ以外に、どれくらいかゆいところに手が届くのかをご紹介して見ようかと思います。 主要5つの機能 最初に紹介しておかなければならないのは、公式でもアピールされている5つの機能。 この5つは、GoogleChromeでいう「ちょっとかゆいとこ
Chrome Web Storeはただのリンクなわけじゃないとそろそろ主張してみる - Startup Reality
5月16日にChromeウェブストア日本語版がオープンしました。うちのCrowyも出店させてもらっています。 Chrome Web Storeはその名の通り、Webアプリのストアです。 iPhone App StoreがiPhoneで動くアプリのストアであることとと対比すれば、Chrome Web StoreはChromeブラウザで動くアプリのストアです。 そこに行けば、Webアプリだけを簡単に探せて、評価も見れて、インストールも簡単にできます。 でも、よく言われるのが「これってただのリンクじゃん」という意見。 うん。まあそうです。そうなんですが、それでChrome Web Storeが価値がないように言われるのはちょっと心外だなあと思うので、一言書いてみます。 僕も英語版が去年オープンしたときに同じ感想を持ったので、みなさんの意見は理解できます。でも、だんだんChrome Web Sto
触れる価値あり。Google Chromeをプログラミングエディタ化する·SourceKit MOONGIFT
SourceKitはGoogle Chrome内で動作するテキストエディタ。Dropbox APIを使っている。 SourceKitはGoogle Chrome向けのフリーウェア（ソースコードは公開されている）。なかなかWebアプリケーション化しないものの筆頭として考えられてきたのがテキストエディタだ。特にプログラマ向けのエディタになると手になじんでいるかどうかの問題が大きく、なかなか本格化しなかった。 まさにエディタ 確かにWebベースで開発するということに大きなメリットは感じられなかったのは確かだ。だがSourceKitを見たら、その考えが変わってしまいそうだ。 SourceKitはGoogle Chromeの機能拡張として提供される。左側にファイルツリー、右側に編集画面が表示される。開発者向きに各言語向けのハイライトに対応している。さらにテーマも幾つも用意されており自分好みの配色を選
ChromeをiPhoneシミュレーターにできる拡張「IPSim」:phpspot開発日誌
iPSim - Chrome Web Store ChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHPフロントエンドのコンソールロギング用Chrome拡張「C
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
自分で育む快適英語生活！
英語のドキュメントを日々閲覧するギークにとって、英和・和英辞書は手放せない。より快適に英語の文章を読んだり翻訳したりするため、Webページ内で文章を選択するとポップアップして辞書へのリンクを表示してくれるChrome拡張を作成した。ポップアップには選択した文章を「英辞郎 on the WEB」で検索するためのリンクと、Google Translateによる訳が表示されるようになっている。 即興で作ったのであんまり凝ったことはしていないが、次のようなところにこだわってみた。 ポップアップ表示、非表示時のアニメーション。 テキスト選択領域の近くにポップアップを表示。 AJAXを使って非同期にGoogle Translateの情報を取得。（backgroundページを活用） 随所でjQueryを使いまくったが、やはりjQueryは便利過ぎると思った。今回、特定のページ（jQuery 1.4.2を
YouTube人気急上昇
【ゆっくり解説】DQN家族らが強風の忠告を受けるも、BBQを続け付近を巻き込む大火災に…「八街市 BBQを続けたDQN 11軒全焼」
日本のGoogle 社員が選んだ Chrome エクステンションのご紹介
Chrome エクステンションは、Chrome に便利な機能を追加することで、自分好みにブラウザをカスタマイズできるブラウザの拡張機能です。世界中の開発者の皆さんのおかげで、様々な種類のエクステンションが多数登録され、多くの方に利用していただいています。 先日、Google の社員に対してよく使っている Chrome エクステンションについてアンケートをおこないました。その中からさらに厳選したトップ10を、今回はランキング形式でご紹介します。ぜひ、試してみてください。 Doc PDF/PowerPoint Viewer 添付ファイルで送られた PDF、PowerPoint プレゼンテーション、その他のドキュメントなどのデータをダウンロードすることなしに、 Google Docs Viewer でブラウザ上で簡単に表示することができますRSS Subscription Extension 専
WEBページのスクロールキャプチャーがカンタンかつ多機能なChrome拡張「Screen Capture」
WEBページ全体をキャプチャーするには、試行錯誤したり、特定のツールをダウンロードしたりするものですよね。 今回は、そんなページのスクロールキャプチャを、カンタンにとれてしまうChrome拡張機能をご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! スクロールキャプチャがカンタンなChrome拡張「Screen Capture」 「Screen Capture」は、Googleによって作成された、カンタンにWEBページ全体のスクロールキャプチャーをとれてしまうGoogle Chrome 拡張機能。 キャプチャーだけでなく、ハイライトやテキストの追加、隠したい部分を消すための黒塗りなどの処理もブラウザ上で行うことができます。 ３種類のブラウザ キャプチャー機能 ↑「ブラウザ表示部分」「選
ブラウザをGoogle Chromeに乗り換え中。 - このブログは証明できない。
Chromeがかなりステキだという話をきいて、さっそく乗り換え中です。もともとFirefoxを使っていたのですが、あまりの重さにSafariをメインで使うようになっていました。アドオンが必要なときだけ、Firefoxを使う感じで。でもやっぱり、Safariは拡張性がイマイチですね。それに、ブラウザを終了するとタブの状態を保持してくれない。動作は軽快なのですが、不便です。 さっそく試してみたChromeは、動作がサックサクです。今は拡張機能もいろいろそろっていますね。少しずつインストールしていっています。拡張機能をインストールしても再起動しなくていいのが便利です。また、FirefoxのGreasemonkeyスクリプトをそのままインストールできるのも便利。ブラウザの右上がだんだん賑やかになってきました。 2日ほど使ってみて、インストールした拡張機能をメモっておきます。アルファベット順に。 A
Google Chromeでも動くユーザスクリプトを書くためのメモ - maru source
僕が公開しているTwitterをGoogle風にするCustomTwitter とういうユーザスクリプトをGoogle Chromeに対応させるために行った内容を備忘録としてまとめておこうと思います。 GreasemonkeyとGoogle Chromeは何が違うの？ Google Chromeはネイティブでユーザスクリプトに対応しているようですが、Greasemonkey独自のGM関数には(ほとんど)対応していません。また@機能にもほとんど対応していません。以下のページで対応していない機能を確認できます。 User Scripts - The Chromium Projects @require @resource unsafeWindow GM_registerMenuCommand GM_setValue , GM_getValue , GM_listValues , GM_dele
私が厳選して愛用するGoogleChromeExtension12個＋消した奴36個*ホームページを作る人のネタ帳
この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。 そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。 色々試した結果残ったExtension そもそも。 「これだけは入れておきたいGoogleChromeExtension50」とか、「はずせないお勧めExtension75」とか、お前らは本当にそれだけ全部入れてやっているのかと問いただしたい。 とりあえず60近く入れると、ボタンが隠れて恐ろしく使いにくくなる上、起動してもすぐクラッシュするようになった。なにより、いちいち起動のたびにわけのわからないローディングが走ったり、カクカクする。 皆さんもひとまず入れすぎには注意しよう。 あと、例えば愛用しているdeliciousのExtensi
便利すぎるスクリーンショット＆画像編集 Chrome拡張 Explain and send screenshots
組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 便利すぎる スクリーンショット＆編集 Chrome拡張機能 「Explain and send screenshots」は、ボタンを押すと、Chromeで開いたページの選択した範囲をキャプチャして、そのまま編集することも出来る Google Chrome 拡張機能。 画像編集機能には、簡易版とPhotoshopに似たレイヤー機能付きのpixlr があり、より効率良く画像を扱うことが可能です。 Explain and send screenshots で出来ること 範囲指定した部分のスクリーンショットを撮る撮った画像をそのまま簡易編集出来るPhotoshopに近い高度な画像編集も出来る（pixlr） つまり、スクリーンショットを撮るだけでなく、画像を加
8 of the Best Chrome Extensions for Web Designers
Since Chrome's extension support launched, the browser has become a much more viable tool for web design and development. Whether it can replace Firefox or not depends on your personal preferences and needs, but you won't know until you try. That's why we've spoken with experienced web design professionals about Chrome to compile this list of extensions that will help you make the transition. We'v
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://jp.techcrunch.com/2010/05/20/20100519chrome-os-versus-android/
https://jp.techcrunch.com/2010/05/06/20100505google-chrome-video-test/