http://buchineko.website/chrome-devtools-cording/
Chrome デベロッパーツールで知っていると、Webサイトやアプリの制作が捗る便利なテクニックのまとめ
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
AndroidアプリをPCで動作させる方法――ARC Welderの使い方を解説
グーグルはChromeブラウザが対応するOSであれば、AndroidアプリをPCで利用できる「ARC Welder」を一般向けにリリースしました。 ARC Welderとは？ グーグルは、昨年9月にAndroidアプリをPCで動作可能にする「App Runtime for Chrome（略称ARC）」を発表し、PCで動作するAndroidアプリとしてVineやEvernoteなどをChromeウェブストアにてリリースしていました。 ただ、この機能が利用できるPCは、グーグルが開発するPC向けのChrome OSを搭載する「Chromebook」のみで、WindowsやMacなどで利用することはできず、さらに、一部の開発者のみが利用できたため、公開されているアプリがかなり限られていたことから、実際に使ってみた人はかなり少なかったと思います。 そんな問題を解決するのがグーグルが発表した「ARC
Chrome Developer tools font size - Feeling Transfer Protocol
Google Chrome の Developer toolsでハマったのでメモ。 ある日、 ページの文字を大きくして見ようと思い、 確かショートカットで「Command」+「+」とかあったなーとか思い出して、 実際キーボードでは「Command」+「Shift」+「;」と押してみた。 すると、 おお！閲覧ページが拡大表示されるではないか！ えいっ、えいっ・・・ っと調子にのって大きくしすぎたので、 今度は逆の「Command」+「-」で小さくっと。 えいっ、えいっ・・・ ん？？ 一向に小さくならないってあれ？ Developer toolsの文字がやたら小さくなっとる・・(´・ω・｀)ｼｮﾎﾞｰﾝ ここで自分が「Command」+「-」のつもりで、「Command」+「Shift」+「-」としていたことに気づく 今度こそ、 「Command」+「-」で。 えいっ、えいっ・・・ うん小さく
その場でiPhoneやAndroidのユーザーエージェントに切り替えられるChromeエクステンション・User-Agent Switcher
その場でサクッとUAを切り替える 事が出来るChromeエクステンション User-Agent Switcherのご紹介です。 iPhoneやiPad、Androidだけでなく、 FirefoxやIEなどのブラウザにも スイッチできます。 FirefoxやIE、iPhone、iPadやAndroidなどのユーザーエージェントにその場で切り替え可能なChromeエクステンションです。ただそれだけなんですがシンプルだし地味に便利かなと思いまして。 閲覧中のページでサクッとユーザーエージェントを切り変える事が出来ます。iPhone4やiPad、AndroidなどのタッチデバイスだけでなくIE、Firefox、Safari、Operaなどにも変更可能です。 使い方 使い方は簡単で、User-Agent Switcherをインストールするとメガネのアイコンが表示されるようになりますので、好きなUAを
見ているサイトのスマホ表示を確認できる「iPhoneEmulator」 | 教えて君.net
最近はPC用のウェブページとは別に、スマホの画面に合わせたページを用意するサイトも多くなってきた。Google Chromeの拡張「iPhone Emulator」は、ブラウザで表示中のページを、スマホで表示させたときにどう見えるのかをチェックできるツールだ。 Google Chrome用の拡張「iPhone Emulator」は、スマホ向けページのチェックツールだ。スマホ向けのページを用意しているサイトも多くなってきたが、スマホ版のページを見るにはスマホのブラウザからアクセスしなければならない。 iPhone Emulatorでは、Google Chromeで表示中のページをスマホで表示させたときにどう見えるか、別ウインドウからチェックできる。スマホ向けページをチェックしたい開発者や、お気に入りのサイトにスマホ版が用意されているか知りたい人に勧めたいツール。 ■ Google Chrom
Chromeの「シークレットウィンドウ」はWeb開発にとても使える
皆さん、Google Chrome の「シークレットウィンドウ」使ってますか？ Google Analytics を見る限り、このブログでは Google Chrome がトップシェアですが、周りの方に話を聞いてみると、残念ながら Google Chrome の「シークレットウィンドウ」機能はそれほど使われていないようです。 あれほど Web 開発に使える機能は他にないのに…と残念に思っていても仕方ないので、活用方法をまとめて記事にしてみました。 目次 まずは基本の使い方 Webサービスにログインしている状態としていない状態を同時に確認 Webサービスに2つのアカウントで同時にログイン Webページの表示がおかしい時は、まず「シークレットウィンドウ」で確認 検索エンジンでの順位チェックは「シークレットウィンドウ」で ニコニコ動画が何度もエラーになる時は「シークレットウィンドウ」で まずは基
[D] ChromeとiPhoneでのBelugaの使いこなし術について #beluga #chrome #iphone
災害時にはBelugaがすごく良いんじゃないかという話 - hitoshi DAILY 豚組の@hitoshiさんの素晴らしいBelugaエントリー以降、自分の周りでかなりユーザーが増えて来てるBelugaですが、僕がBelugaについて語りたかった事自体は@hitoshiさんのエントリーが全てを語っているので、純粋にBelugaの使いこなしについて書きます。 まずはBeluga Helperについて Belugaはモバイルに特化したグループチャットと思っている人も多いかと思うのですがちゃんとPCでも使う事が出来ます。 若干分かりづらいので気づかない人も多いみたいですが上のスクリーンショットのようにPCでBelugaのサイトにアクセスすると右上にログインリンクがあります。このリンクからBelugaにログインすればブラウザ上でBelugaを利用する事が出来ます。 ただブラウザ版のBeluga
製作する上で役立つ5つのGoogleChromeエクステンション ｜https://wp.yat-net.com/name
この度の震災により亡くなられた方、ご冥福をお祈りいたします。また、被災に合われた多くの方々に対しまして心よりお見舞い申し上げます。 こちらは大阪ですが、毎日を変わらず仕事をしてる状況で、我々は普段の生活を維持し、経済の安定を目標とすることが必要かと思います。ですので、私自身もそういう方々にとって少しでも有益となる情報を配信出来ればと、ブログの更新を続けさせていただきたいと思います。 日々の制作作業をする上でGoogleChromeは動作が軽く非常に使いやすいブラウザですが、標準のままだとかゆいところに手が届かない事も多く、皆さんも多数のエクステンション（拡張機能）を入れているかと思います。 私自身も多数のエクステンションを入れていますが、今回は制作する上で最近良く使ってるなっていうエクステンションを掲載します。 Image Properties Context Menu https://c
これで君も今すぐ情報目利きに！？Google Readerに評価指数を見せるChrome拡張-PostRank Extension - 適宜覚書-Fragments
これで君も今すぐ情報目利きに！？Google Readerに評価指数を見せるChrome拡張-PostRank Extension Google Readerは代表的なWebベースRSSビューアの一つです。ソーシャルブックマークやソーシャルグラフによって新鮮で興味に合う情報をプッシュで貰いやすくなったご時世ですが、まだまだRSSで定点観測は強力です。（少なくとも筆者の場合、自分の嗜好に最適化したReaderのSubscriptionの方がアタリを引くことが多い、というだけのことかもですが…） しかし、その有用なReaderにも問題はあります。Webを検索するなり、どこかから貰った情報のソースなりを追加していくといつしかSubscription数は増大、結果未読が大量に出てしまいます。未読もTitleからおおよその目利きを効かせれば、これは読むべき、これは…いいや、と判断出来ます。それにして
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Google Chrome Deveoper Tools」はこう使う！ 基本機能チュートリアル & GDD 2011 セッション概要
これはすごい！Google Chromeの開きすぎたタブを自動保管しメモリ解放する拡張機能「Stock Tabs」 | フリーソフト,Windows PC活用情報局
Chromeの使っていないタブ読み込みを停止してメモリを解放する拡張機能「TabMemFree」 | フリーソフトラボ.com
5509.me
Facebook Poke All - Chrome ウェブストア
iPSim - Chrome 웹 스토어
Chromeのツールバーから簡単に短縮URLが作成できる拡張機能「goo.gl URL Shortener」 | ライフハッカー・ジャパン
ウェブブラウジングを快適にするChromeショートカット15選 | ライフハッカー・ジャパン
「Cloud Save」なら画像やファイルを右クリックからクラウドサービスに楽々保存できます！ | ライフハッカー・ジャパン
元カノ・元カレをFacebookから隠してくれるChrome拡張機能「Eternal Sunshine」 | ライフハッカー・ジャパン