開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
Addy Osmani インタビュー 〜 ツール編
.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
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショ
自作のChrome ExtensionがChrome 35から無効に - udagawa’s blog
重要：Chrome 拡張機能についてのお知らせ https://productforums.google.com/forum/#!category-topic/chrome-ja/7qSACiy8EtY 要はChrome WebStore からダウンロードしたものじゃないと拡張機能は有効にならない。 デベロッパモードで入れていたものが無効になった。 削除して再インストールしたら有効になったがChromeを起動しなおすと無効になってしまう。。。。 この動きはどうもWindowsだけのようだ。MacのChromeはいまのところ大丈夫。 まだ一応回避手段が提供されている Policy List http://www.chromium.org/administrators/policy-list-3 によるとWindowsの場合はドメインに参加しているか、否かで変わる。 ドメインに参加している場合
Octotree - GitHub code tree - Chrome Web Store
GitHub on steroids Browser extension that enhances GitHub code review and exploration. Features * Fast IDE-like code tree * Quick search in tree format * Bookmark repos, issues, PRs, files * Support GitHub themes * Support private repositories * High performance, working with repositories of any size PRO features * File icon themes * Code font settings * Quick PR navigation * Unlimited bookmarks *
API Code Generation
Firebase is a server and database that allows developers to interact with data through API calls. It allows syncing of data across multiple applications. Developers only need to write front end code, while Firebase securely monitors the data. Firebase offers easy hosting and a tool called Firebase Forge for viewing, editing, deleting data, users, databases, and permissions in real time. The docume
tracing-framework by Google
Rich Tracing Choose what methods to trace and add custom data to each event. Track asynchronous flows and actions. Slick Visualization Smoothly dig through millions of events in an awesome UI. See patterns and understand your code like never before.
僕が考えたChrome拡張機能を作るときのデザインパターン
最近いくつかのChrome拡張機能を作っていて、すでに数千人のユーザを獲得できているものが出てきてたりします。 Image collector extension goo.gl URL Shortener extension mixi Check button extension Semantic inspector これだけ作ってると、何となく自分でのChrome拡張機能を作り出す際のデザインパターン・・・っていう大それたものじゃないけど、ようはテンプレが確立されてきます。全く褒められない書き方をしているかもしれませんが、ここでそのテンプレ達を晒しておこうかな、と思います。 manifest.json まずはChrome拡張機能の要であるマニフェストファイルです。これは誰が書いてもさほど変わらない記述内容となるでしょう。 { "manifest_version": 2, "name":
2011年に見つけた入れておくと便利なオススメChrome拡張機能ベスト10 | フリーソフトラボ.com
Chromeの拡張機能が本格的にリリースされるようになって、2011年いっぱいで早くも約2年が経過しました。世界のブラウザシェアでFirefoxを追い抜き、拡張機能の開発もますます盛んなChromeですが、主要なものは最初の1年のうちに出そろった感があり、最近は面白い拡張に出会うことも少なくなってきました。 今回はそんな中で、2011年の1年の間に新しくリリースされた拡張機能の中から、筆者が気に入った便利な拡張機能の個人的ベスト10をまとめて紹介。ブラウジングを効率化してくれるものや、Chromeのかゆいところに手が届くものなど、インストールしておくと何かと便利そうな拡張機能を中心に選んでみました。 Reeder for Chrome ウェブ版Googleリーダーの見た目をMacで超人気のGoogleリーダークライアント「Reeder for Mac」と全く同じにできる拡張機能。以前当サイ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
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
ついに出た！Chrome版「Page Speed」の使い方
2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか？ 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず
ウェブブラウジングを快適にするChromeショートカット15選 | ライフハッカー・ジャパン
Google Chromeのショートカットまとめです。ショートカットはたくさんありますが、中でも、ウェブブラウジングを快適にするものをピックアップしました。 それでは以下にショートカットをまとめます。 Alt+F または Alt+E ツールメニューの開閉。 Ctrl+Shift+B ブックマークバーの表示・非表示。 Ctrl+D 現在開いてるページをブックマークに追加。 Ctrl+Shift+D 開いているタブすべてをブックマークに追加。 Ctrl+J ダウンロード履歴を表示。 Shift+Esc Chromeタスクマネージャの起動。 Ctrl+Shift+J Chromeデベロッパツールの起動。 Ctrl+L URLバーにカーソル移動。 Ctrl+Backspace テキストボックス内の文字列を一定間隔まとめて削除。 Ctrl+G ページ内検索。Ctrl+Gを押し続けることでヒットしたワ
FirefoxからChromeに乗り換えたので導入した拡張機能＋周辺ツールまとめ | フリーソフトラボ.com
Google Chromeにバージョン10から待望のパスワード同期機能が追加されたので、これを機に長い間使い続けたFirefoxから乗り換えてみました。DropboxやEvernoteの台頭の影響もあって”クラウド化”の利便性が大いに取りざたされている昨今ですが、Google Chromeもこれと同じように、ブックマークから拡張機能までほとんどのユーザー設定に関する情報をクラウドに預けられるので、定期的にバックアップを取る必要がなかったり、別のPCでも一発で同期できるところに他ブラウザにはない魅力を感じました。 実際の移行に当たっては、今まで使っていたFirefoxと同じ使い勝手やアドオンで追加された機能（私がずっと使っている13個のお気に入りFirefoxアドオンまとめを参照）をGoogle Chromeでどこまで再現できるのか、というのが最大の課題でしたが、最近ではChromeも拡張機
YouTube人気急上昇
【ゆっくり解説】DQN家族らが強風の忠告を受けるも、BBQを続け付近を巻き込む大火災に…「八街市 BBQを続けたDQN 11軒全焼」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHubを快適にブラウジングするための3種の神器
Chrome DevTools | Chrome for Developers
Post by @niwaringo
casperjsのテストをUI操作で作成する。 - Qiita
Site Under Maintenance
