覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
Webデザイナー、コーダーならDLしとこう！あると地味に便利なGoogleChrome機能拡張4つ
今日は業務でよく使う、Webデザイナー・コーダーさんならあると地味に便利なGoogleChrome機能拡張をまとめてみました。私にとって、どのエクステンションも無いと「ちょっと困る」ものたちばかりです。 Image Properties Context Menu まずはImage Properties Context Menu。 画像を右クリックすると、パスやサイズ、altテキスト、ファイルサイズ等を別ウインドウで表示してくれます。 参考：[Google Chrome]右クリックで画像のプロパティを簡単に確認できるエクステンション「Image Properties Context Menu」 MeasureIt! 続いてはMeasureIt。 ブラウザ上に「ものさし」を表示してくれるエクステンション。ささっと画像サイズを調べたり、カラムの幅を測ったりするのに使用しています。 Show Ti
まさか使ってない人いないよね？Google検索が猛烈に捗るChrome拡張【ato-ichinen】+α - すりゴマ・ドットコム
すりゴマです。 今日もいい感じにすり潰していきますね。 photo by MoneyBlogNewz ググる先生に聞くことが非常に多いすりゴマですが、何も考えずに検索しているとこんなことが起きます。。 アプリの使い方を検索して上位のサイトを開いたら、前のバージョンのアプリのことが書いてあって、全く役に立たなかった！ OTL 最新のランキングを調べていたら、去年や一昨年のランキングばかりが出てきて邪魔。。。 orz などなど。 そんなときに便利なChrome拡張機能が「ato-ichinen」です！ いちいち検索結果の上の「検索ツール」を開いて期間を設定することなく、直近1年の検索結果のみを表示してくれる拡張機能です。 (・∀・) すりゴマ・ドットコム読者の皆さんなら既にお使いかとは思いますが、さらに使いやすくするためのちょっとした工夫もご紹介します！ Chrome拡張機能を探してインストー
音楽再生に特化したChrome拡張「Streamus」が便利すぎてiTunesから曲を消した : Blog @narumi
2014年02月14日19:06 音楽再生に特化したChrome拡張「Streamus」が便利すぎてiTunesから曲を消した http://narumi.blog.jp/archives/3405214.html音楽再生に特化したChrome拡張「Streamus」が便利すぎてiTunesから曲を消した よく仕事中にiTunes立ち上げて音楽を聞いたりしていますが、考えてみたらプレイリストにある音楽ってほぼ全部YouTubeにもアップされてるんですよね。ってことはYouTubeで聞けばいいじゃんって思うんですが、聞きたい曲を「探す→再生する→止まる→また探す」っていうのが非常に面倒くさい。 そしたらGoogle Chromeの拡張で、YouTubeにある曲をBGM代わりに再生するのにぴったりなものがありました。「Streamus」というやつです。 Streaming YouTube mu
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
Chromeをメインブラウザにするための絶対はずせないエクステンション vol.1 - iTea3.0
@torizoです。 今回はChromeをメインブラウザにするための絶対にはずせない超オススメエクステンションを紹介します。
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
ChromeでもFirefoxでもIEでも！キャプチャ拡張機能の決定版「FireShot」が素敵だった - ウェブ企画ラボ
Chormeをメインブラウザとして使っていますが、キャプチャを取るのにしっくりくる拡張機能が無く不便でした。 でも、ついに見つけました！キャプチャをとるのに便利なChoromeの拡張機能「FireShot」を！ 今回は「Fireshot」を実際使ってみて便利だと思った点と簡単な使い方についてご紹介いたします。 「FireShot」の便利なところ 1.キャプチャの選択範囲を事前に選べる！ Fireshotはキャプチャできる範囲を事前に選ぶことができます。 選べるのは以下の4通り。 ページ全体をキャプチャ 見える範囲をキャプチャ 選択された範囲をキャプチャ ブラウザウインドウをキャプチャ 事前に選べるのでキャプチャした後に画像を切り抜く手間が省けます。 また、「選択された範囲をキャプチャ」や「ブラウザウインドウをキャプチャ」(ブラウザの枠ごとキャプチャすること)は他の拡張機能でなかなか見かけな
『OneTab』で調べ物はずっと効率良くなる : ライフハッカー［日本版］
以前、ライフハッカーでも取り上げたGoogle Chromeの拡張機能『OneTab』。たくさん開いたタブをクリックひとつでまとめて整理してくれます。調べ物に没頭していて多くのページを開いた結果、Chromeがタブだらけになっていたという経験をお持ちの方には、強い味方になる拡張機能です。 OneTabは私もお気に入りで、調べ物をする時に重宝しています。今回はその使い方を紹介します。 まずは簡単に機能を紹介します ツールバーからOneTabのアイコンをクリックすると、開いているタブをすべて閉じると共に「OneTab」タブが作られ、そこへ開いていたタブをまとめます。作成されたタブはリンク集のような見た目で、ページのタイトルが一覧表示されており、クリックするとページを開けます。また、「Restore all」をクリックすれば、すべてのタブを元に戻せます。 区切りのいいところで「OneTab」する
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
Google Chrome Short Cut Key - びっくりするくらいいまさらな話 - ゆめ見るディオスクロイ
photo by ERIO 先日、私の身に非常事態が起こりました。 そのときのことを思い出しただけでも、背中の真ん中辺りにじっとりと汗がにじむような感覚を今でも覚えます。 事件発生 それは突然起こった。 朝、ベッドから抜け出して危うい足取りでよろよろとPCデスクの前に座り、モニターを持ち上げ、Windowsを立ち上げる。 私のPCは立ち上がりが驚くほど遅く、宙を舞うほこりのようにふわふわと起動を始めた。 でも、これくらいでちょうど良い。 特段急ぐ必要もないのだ。 私はいつもその間に、水道から鉄瓶に水を注ぎ、弱火にかける。 珈琲を入れるためだ。 ▼シンプルなアラレ模様が好き 以前何気なく買った鉄瓶を私はとても気に入っており、それ以来珈琲を淹れるときは必ずそれでお湯を沸かすのだ。 ちなみに、残ったお湯はさましてそのまま飲むだけで旨い。 そこらのミネラルウォーターなど到底太刀打ちできない甘みがあ
（非開発者でも使える）「Chrome Developer Tools」を使ってみよう！ | ライフハッカー・ジャパン
Digital Inspiration：Google Chromeはすばらしいブラウザですが、あまり知られていない優れた機能を隠し持っています。それが「Chrome Developer Tools」。開発者向けのツールに見えますが、一般ユーザーも十分に使いこなせます。 ChromeをウェブページのWYSIWYGエディタとして使えるのをご存知ですか？ 計算機になるのは？ カレンダーの日数を計算できるのは？ 以下のビデオはDevelopers Toolsでできることをざっと紹介しています。 それではさっそくChrome Developer Toolsを試してみましょう！ 非開発者のための「Chrome Developer Tools」入門 デスクトップのChromeでこちらのデモページを開き、「Ctrl ＋ Shift ＋ I」（MacはOpt ＋ Cmd ＋ I）を押してください。Chrom
Chrome の拡張 JSONView が便利ですね - latest log
この記事の賞味期限は2013年内です。10秒で読めます。 (ε・ ワ ・)з 勘違いがありまして、本文の趣旨が変わり Chrome の拡張 JSONView の機能紹介になりました JSONView をインストールした状態でhttp: や https: スキームで始まる JSONファイルを開くと、改行やスペースを含まない(圧縮された状態の)JSONも、適切に展開した状態で見ることができます。 この状態で、マウスを各要素にホバーさせると、画面下の薄い紫の部分に、要素にアクセスするためのパスが表示されます。 紫色の部分: tree[0].attrs.frame[3] xpath のようなこれは、json path とでも呼ぶのでしょうか? また、各ノードの左側にある - や + をクリックすると展開と折りたたみが行われます。 以下のパスを JSONView をインストールした状態で開くと、お試
Sublime Text2 と Emmet LiveStyleをかけあわせて、爆速でCSS開発☆！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんばんは。小林です。 今回の記事は、下記を利用して開発されている方には、是非読んでいただきたい。 Sublime Text + Google Chrome( 或いはSafari ) そうでない方にもそこそこ読んでいただきたい。 目的としましては、「CSSの開発をより高速に行える環境を作りましょう！」ということなんです。百聞は一見に如かずということで、まずは、こちらのスーパーにエクサイティングなデモ動画を見ちゃいましょう！ 諸般の事情で動画が観れないという方に簡単に説明しますと、Emmet LiveStyle(以下LiveStyleと表記)を使うことで以下のことができます。 リアルタイム更新。Sublime Textでただタイピングするだけで、あたかもブラウザのデベロッパーツールのCSSパネルを弄るかのように、リアルタイムでCSSを更新できる。無論いちいちファイルを保存したりする必要はない
Google Chromeの便利なアドオンを教えるスレ : ライフハックちゃんねる弐式
2013年09月17日 Google Chromeの便利なアドオンを教えるスレ Tweet 36コメント ｜2013年09月17日 22:00｜ソフト・アプリ等｜Editタグ ：定番 1 ：以下、名無しにかわりましてVIPがお送りします：2013/09/16(月) 22:00:27.47 ID:fBdX5AFx0 まずは Adblock Plus 広告を消してくれる便利なアドオン 2 ：以下、名無しにかわりましてVIPがお送りします：2013/09/16(月) 22:04:32.60 ID:fBdX5AFx0 IE Tab Internet Explorerのレンダリングエンジンで表示するアドオン IEでしか開けないサイトや、ActiveXコントロールを必要とするサイトを利用する時に便利 3 ：以下、名無しにかわりましてVIPがお送りします：2013/09/16(月) 22:05:49.
iPhone版のChromeが本気で便利すぎる件
もう使ってる人はそんなの知ってるし・・・と感じるかもしれないけども、知らない人は絶対一度はつかっておいたほうがいいよねっていうアプリ。今更とか言わないの。 そもそもPCのブラウザがChromeを使っているので、これを使わない手はないんだけども、わりと私の周りで使ってる人がいなかったのでご紹介。 便利なポイント７つ 私はこれでChromeアプリをメインにしました的なポイント。 １）タブ移動が楽 これはもうほんと触れば一瞬でわかるレベル。複数のタブをペラペラ見ていける。 画面のはじから中央へスワイプしても隣のタブへ移動してくれます。 ただしこれはデメリットでもあり、だいたい赤いラインをひいたところがスタートラインとなります。この結果、普通にブラウジングしている時に引っ張ってしまう事も多々あります。 ２）PCモードへの切り替えが楽 個人的な問題ではありますが、スマホ用の表示が大嫌いなんですよね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知っているとちょっと便利になるChrome拡張機能10個まとめ｜男子ハック
ソニック速報
紹介したいサイトを好きなサイズにキャプチャして画像つきリンクを簡単に作成できるChrome拡張機能「kwout」｜男子ハック
http://www.2ch-search.net/blog/6