スクリーンショットを撮るのはChromeがいちばん?! | DevelopersIO
新しい職場、新しいパソコン。まず始めに入れるツールの一つがスクリーンショットではないでしょうか。 でも、Chromeのver.59からは、標準機能として装備されたようなのです。 やりかた ChromeのDevelopers Toolを立ち上げる。 Macだと、Chromeを開き「alt + command + i」を同時に押す。 レスポンシブ表示にする 続いて、command + shift + m を押します。または、下記のボタンを押してください。 画面上部に、解像度やデバイスを変更するセレクトボックスが表示されます。 デバイスの選択肢を増やす 必要最低限はありますが、PCのスクリーンショットも取れるようにしたいので、Editを押します。 デベロッパーツールの表示が切り替わるので、「Laptop with HiDPI Screen」と「Laptop with MDPI Screen」をチ
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
CSSを編集して自動保存できるChromeの拡張機能「DevTools Autosave」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 突然ですが、皆さんはどうやってWebページを組んでますか？ 僕は、HTMLの骨組みをひと通り書き終え、それからChromeで直接CSSを書いていきます。個人的には、ChromeはCSSをリアルタイムでいじれるので便利です。 しかし、この手法で組むと、CSSを追加、編集するたびに、いちいちコピペを連発しなければならない。しかもその後ちゃんとコピペしきれているか別タブで確認して・・・。 これは、NO GOODです！ 「編集したCSSをそのまま保存できたらなあ。」と誰もが思うことでしょう。ブラウザのセキュリティ上、そのような機能は永遠に提供されないと思われますが。 と、思ったのは誤算でした！ なんと、Chromeが開発者向けに「Chrome DevTools Autosave」という名の拡張を出しているんです！これを使えば、編集したCSSがそのまま保存されます！
iOS版 Google Chrome と はてなブックマーク for iPhone を連携する - 大西ブログ
iOS版 Google Chrome 、PCとの同期とか便利ですけど、ブックマークレットが使えないため、はてなブックマークと連携して使うのが難しくて残念… と思っていたのですが、工夫すると連携できなくもないとわかったのでシェアします。 まず、Chrome に以下のブックマークレットを登録します。この時、誤爆しづらい、わかりやすい名前を入れておくのがポイントです（僕は"bbb"としてみました）。 javascript:(function(){location.href='hatenabookmark:/entry?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'&backurl='+encodeURIComponent(location.href.replace(/^h
Chromeで超簡単にUser Agentを変える方法 :: 5509
@hokaccha に言われて便利すぎて脳みそ飛び出るかと思った途中から嘘です 以下、見たことのある内容が続きます 全然気がつかなかった・・・いつからだろう・・・ ＞ 17からだそうです Chromeにビルトインされてるのですぐ使えます。 ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stable(Macの17.0.963.46)でもOverride User Agentの項目あるのは確認してます。 通常はもちろんユーザーエージェントはChromeですが、Cmd+Option+I などでインスペクタを開くと 右下にギアアイコンがあって、そこからインスペクタのSettingが開けます すると Override User Agent という項目があるので チェックすると、よく使いそうな User Agent 一覧がプルダウンで開きます 試しに iPh
Google Chrome の実験用オプション「about:flags」
Google Chrome のオプションは、レンチ・メニューの「設定」から変更できる。更に加えて、Google Chrome には「実験的」なオプションも用意されている。これは「設定」ページからは辿れなくて、アドレス・バーに直接以下の URL を入力する: about:flags すると、こんなメッセージが現れる。 これらの試験運用版は問題が発生する可能性があるため、ご利用の際には十分ご注意ください 警告 この試験運用機能は、随時変更、中断、提供中止されることがあります。これらの機能のいずれかを有効にした場合に生じる結果について、Google は一切保証しません。ブラウザによってすべてのデータが削除されたり、予期せぬ方法でセキュリティやプライバシーが侵害されたりする可能性があります。続行する場合は十分ご注意ください。 色んな実験的なオプションが揃っているので、普通の Google Chro
Google Chrome版Web Developerが公開されてた（追記2010.04.23） - 以下斜め読んだ内容
sitepointのブログエントリで知った。 Web Developer - Google Chrome 拡張機能ギャラリー 「Web Developer」と冠したchrome extensionは既に複数あるが、これはFirefoxのアドオンWeb Developerの開発者Chris Pederickが新たにchrome版として開発したもの。バージョンが0.1だけあって実装されてない所が多い。求むフィードバック、とのこと Chrisが公開をアナウンスしたブログエントリのコメント欄は賞賛の嵐。 Web Developer 0.1 for Google Chrome on Blog on chrispederick.com Chris Pederickの2010.3.17のブログエントリ。このエントリでGoogle Chrome版Web Developerの公開がアナウンスされた 以下斜め
起動オプション - Google Chrome まとめWiki
起動オプションの設定方法 Windows版の場合 Google Chromeのショートカットを新規作成 作成したショートカットを右クリック、プロパティを選択 ”リンク先”へ起動オプションを追加 例 XP "C:\Documents and Settings\＜ユーザー名＞\LocalSettings\ApplicationData\Google\Chrome\Application\chrome.exe" --disable-javascript --disable-java --disable-plugins Vista "C:\Users\＜ユーザー名＞\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-javascript --disable-java --disable-plugins 半角スペースを空けてオ
YouTube人気急上昇
【ゆっくり解説】DQN家族らが強風の忠告を受けるも、BBQを続け付近を巻き込む大火災に…「八街市 BBQを続けたDQN 11軒全焼」
Chromeの隠し機能にアクセスできる「Service Pages for Google Chrome」が便利！開発者向けの特殊URL早見表付き - Chrome Life
Chromeでは、アプリケーションやエクステンションを開発する人のために、ブラウザのメモリ状況やキャッシュ・ネットワーク通信状態などの内部情報を確認できる仕組みを提供しています。 ブラウザの内部情報は、chrome://xxx のような特殊なURLでアクセスすると確認ができます。 例えば、ブラウザで下記のアドレスを入力します chrome://net-internals/ ネットワークに関する様々な情報が確認できるページが開きます。 他にもこのような特殊URLはたくさんあるのですが、開発者向けの隠し機能なのでアドレスを直接入力しなければいけなく面倒です。 しかし、最新のChromeでは特殊URLの一覧ページがちゃんと用意されていました。 chrome://chrome-urls/ をアドレスバーに入力すると、特殊URLの一覧が表示されるので、そこからアクセスできるようになります。 どのUR
米Lifehackerオススメ、GoogleChrome拡張機能18選 | ライフハッカー・ジャパン
Windows/Linux対応GoogleChromeのみ：Google Chromeの拡張機能を集めた公式ギャラリー「Google Chrome Extensions」がオープンしました。そこで、こちらでは米Lifehackerオススメの拡張機能をご紹介しましょう。ちなみにいずれもWindows/Linuxのみの対応ですので、Macユーザの方は、近い将来リリースされるであろうMac対応版までしばしお待ちください。 Google Mail Checker: アドレスバーに常駐させると、未読メッセージを追跡してくれ、クリックするとGmailが開く。 RSS Subscription Extension: 標準フィードを検知するとRSSアイコンがアドレスバーに表示され、クリックすると選んだページへフィードしてくれる。 Xmarks for Chrome Beta: Chromeとブックマークア
ウェブサイト作成に役立つChrome拡張機能14個
Chrome ウェブストア日本版の開設を記念？して便利そうな拡張機能を紹介します。拡張機能の紹介は結構ありふれていますし、挙げだすときりがないのでウェブサイト作成に役立ちそうなもの限定で紹介ということで。 スクリーンショット スクリーンショットを撮る拡張機能です。切り取りがかなり便利です。 Awesome Screenshot: キャプチャーと注釈 スクリーンショットを撮って、それを切り取ったりテキストを挿入したりできます。その他にも、ぼかしや矢印、楕円なども挿入できます。切り取る際にサイズが表示されて使いやすいです。ページ全体のスクリーンショットも撮れます。あとは画像を縮小できれば文句なしですね。 webページショット - Webpage Screenshot 内容的には先ほどのものとほぼ同じでテキスト、矢印、楕円などを挿入できます。テキストに陰がつくなど若干の違いがあります。 サイトの
Google Chromeの開発ツールは実務に耐えうる：Firebugなみの性能を発揮 - builder by ZDNet Japan
先日ベータ版が公開されたGoogleオリジナルのブラウザ「Google Chrome」。「無駄を削ぎ必要な機能のみを追求した」というのが謳い文句だが、その一方でウェブ開発者向けの機能が充実している点も見逃せないポイントだ。 高機能なJavaScriptコンソール Google Chromeはウェブ開発者向けの機能として、デフォルトでJavaScriptコンソールとJavaScriptデバッガが付属している。特にJavaScriptコンソールの方は、Firefoxのアドオンとして著名なFirebugに劣らない高機能さであり、実務でも十分に使えそうだ。 ChromeのJavaScriptコンソールおよびJavaScriptデバッガは、［開発/管理］メニューから起動できる（図1）。
Google Chromeで画面分割できるブックマークレット「Dual View」
デュアルディスプレイを使っていれば、なにもブラウザの画面を分割する必要などないのですが、なかなかそうもいかないとき、画面を分割したほうが効率化につながることが多いですよね。 今回は、Firefoxの画面分割アドオンSplit Browserまでの機能はないものの、ブラウザの画面分割を、Google Chromeで実現するブックマークレットをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! Google Chromeで1タブで2ページを同時閲覧できるブックマークレット ↑これがGoogle Chromeで画面分割したところ。 Google Chrome画面分割ブックマークレット 下記のボタンをマウスドラッグして「ブックマークバー」へ追加してください。 Chrome Dual View
ChromeからFirefoxを開く拡張機能 - もの置き処
その名をOpen in Firefox しっぽをクリックするだけでほら今見てるページがFirefoxでも開く...というアレなのです。 なぜ今までなかったのか 他のプログラムを開くAPIがChromeに無い セキュリティの都合上仕方ない とはいえ裏テクがありまして。 NPAPI 要するにプラグイン化です。dllとして動くので何でもできるようになります。*1何でもです.怖っ C++いじるのは私これが初めてです。 文字型が意味不明*2すぎてかなり戸惑いました。「初心者は必ず通る道」とのことですが。 http://fatalita.sakura.ne.jp/Junk/_T/index.html これを見つけられてよかった. 完成品 インストールはこちらから(Chromeで見てくださいね) DLLのソースも拡張(zip圧縮です)に入っているのでサンプルにして自由に使ってください。 拡張はgoogl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Experiment 1,000 by Google Data Arts Team - Experiments with Google
Google Chrome Developer Tools入門 in DevFestX Sapporo
作業効率が10倍アップする Chrome Developer Tools の使い方 - はてブロ@ama_ch
【厳選】本当に使える Google Chrome のショートカットキー17個まとめ。 | 和洋風◎
http://www.ginnobi.com/news/chrome-iphone/