開発体験を変える! 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 を入力することで取得で
Netflixで英語が勉強できる「LLN」がすごい！ 字幕の同時表示・速さ調整・辞書機能ありと至れり尽くせりだよ
» Netflixで英語が勉強できる「LLN」がすごい！ 字幕の同時表示・速さ調整・辞書機能ありと至れり尽くせりだよ 新年ということで、今年の目標を掲げた人も多いはず。わたしは英語をより深く学びたいと思っているのですが、タイミングよく、Netflixで最適なサービスを発見したんです。 それは「Language Learning with Netflix（以下 LLNと表記）」というサービス。 英語と日本語の字幕を同時に表示できるほか、セリフごとに巻き戻し・繰り返し・早送りができるなど至れり尽くせり。Netflixで好きな作品を観ながら、英語学習ができちゃうというわけなんです！ 【機能が充実しまくりなんです!!!】 Netflixユーザーなら無料で使えるこのサービス。Google ChromeのプラウザでNetflixを開くと、すぐに利用できます。 わたしはNetflixユーザーかつGoog
Chrome 70 デベロッパーツールが便利になってる！Web制作者がチェックしておきたい新機能のまとめ | コリス
DOMノードの強調表示 Consoleタブを選択。 DOMノードに評価される式を入力。 入力する式 以下の便利な式を使用できます。 「document.activeElement」で、現在フォーカスのあるノードを強調表示。 「document.querySelector(s)」で、任意のノードを強調表示。sはCSSセレクタで、DOMツリー内のノード上をホバリングするのと同じ。 「$0」で、DOMツリーで現在選択されているノードを強調表示。 「$0.parentElement」で、現在選択されているノードの親を強調表示。 パフォーマンスパネルの最適化 今までのパフォーマンスパネルは大きなページをプロファイリングする際にはデータの処理とビジュアル化に時間がかかりました。Chrome 70ではこの処理とビジュアル化が高速になりました。 パフォーマンスパネルの最適化 信頼性の高いデバッグ Chro
Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita
経緯 もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。 ソースコード 実装に関わる技術寄りの用語: React, esbuild, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, intl.v8BreakIterator, deinja, クロスブラウザ, など。 ※詳細は「Mouse Dictionaryの技術的な話」をご参照ください https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb 使い方 インストール
Android版Chromeのflags設定まとめ! おすすめジェスチャーでスマホを使いこなそう
どれも使いこなすことで、ページ移動やタブ切り替えを高速化できますよ。 きっと知らない機能があるはずなので、ぜひご覧あれ。
Web制作者は要チェック！Chrome 68でアップデートされたデベロッパーツールの新機能
25日の昨日にリリースされたChrome 68で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 ブラウザの方は、以前から伝えられていた通り、http通信の際に「保護されていない通信」と表示されるようになりましたね。 What's New In DevTools (Chrome 68) コンソールの補助機能 より素早く、信頼性が高いUIとAudits BigIntのサポート Add property path to watch Show timestampsの移動 コンソールの補助機能 Chrome 68では、オートコンプリートやプレビューに関連する新しいコンソール機能が加わりました。 式の結果をプレビュー コンソールに式を入力すると、その式の結果をカーソルの下にプレビューできるようになりました。 sort()の結果をプレビュー Consoleをクリックして、コン
既存のコードの理解が捗るChrome DevToolsの使い方 - kitak blog
jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。 そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れようとすると自分自身のコードの理解が進んでおらず「えーっと...」となってしまった。 上記以外にも、長年、多くの人が触れてきたJavaScriptのコードに機能を追加する、修正するのはなかなか難しいのではないか、と思う。最初は、ちょっとしたユーザビリティの向上のために書かれたスクリプトが、気がつけば多数のDOM操作、至る所で宣言される変数、どこから実行されるか分からない関数群で無秩序に膨れ上がり、頭を抱えることになる(そうならないようにするのがウェブフロントエンジニアがいるひとつの理由ですが…)。 これらのケースでは、まずは修正、あるいは
PHPからChromeにログ出力「Chrome Logger」
こんにちは、中川です。 PHPでの開発中のちょっとしたデバッグに、echo や var_dumpで画面に値を出力して確認することがありますよね。 このデバッグ方法は簡単でいいのですが、出力した配列の値などはパッと見で確認しやすいとは言えませんし、画面の表示内容が崩れたりします。 画面に出力しない方法としては、 error_log関数を使ってapacheログやファイルに出力する方法もありますが、 この場合は、サーバ側にログインしてtailなどでファイル内容を確認する必要がでてきます。 そんなちょっとした問題を解決してくれるツール 「Chrome Logger」をご紹介したいと思います。 Chrome Loggerを使えば、JavaScriptのconsole.logのように、 表示画面には影響を与えないでブラウザのデベロッパコンソールにPHPから値を出力できます。 ■Chrome Logge
cVim: Google ChromeのVimperatorみたいな拡張
B! 57 0 0 0 普段はブラウザはFirefoxを使っていますが、 一番の理由は Vimperator というVimライク(+More)な動作をFirefoxで再現してくれるプラグインがあるからです。 Google Chromeの方にもいくつかそういったものはありましたが、 単にh/j/k/lで上下左右に移動できるなど、キーマップをしているだけ だったりしたのでダメでしたが、 最近目についたcVimというプラグインが それなりに色々出来そうだったので試してみました。 cVim cVimrc cVimrc: Syncの罠 VimperatorにあってcVimにないもの cVimを使わずにGoogle ChromeでVim FirefoxのVimperatorについて cVim cVim - Chrome ウェブストア: https://chrome.google.com/webstor
Google Chrome用Vimpのニューフェイス、cVim登場！ - プログラムモグモグ
Vimium、Vichrome、Vromeと、Google ChromeをVimのキーバインドで扱える拡張は幾つかありましたが、 ここに来て新しい拡張が登場しました。 cVimです。 Chrome Web Store - cVim 特徴としては Vimのようなフォーマットの設定ファイル ビジュアルモードでテキストを選択 正規表現を使ったページ内検索 が挙げられます。 この拡張は、以下のリポジトリーで開発されています。 1995eaton/chromium-vim - GitHub 今はかなりアクティブなので、issueに投げても一瞬で返事が返って来ます。 初期バグがまだあると思いますので、インストールして何か気付いたらissueを投げてあげるといいでしょう。 作者がやる気があるうちに、自分が気に入らないところを直させるのがコツです。 やる気がなくなってしまうとissueもPRも放置されてし
Hometype 2
Mode Hometype has like vim's modes. All modes can be switched with keyboard manipulation. Normal Mode In most cases Hometype is in this mode. You can scroll to up or down on the page, and move to back or forward in the history. Insert Mode Hometype shifts the current mode automatically to this mode when a form is getting the focus. In insert mode don't bind a command to key because you have to inp
Chromeで画面が白いままの解決方法
◆Chromeが白いまま、症状 ・起動はするが、Webページが表示されず、画面が真っ白のまま ・Windows update やChromeを最新版にしても直らない ・設定ページなどは出る どうやら、同じような症状の人が多数いるらしい。公式プロダクトフォーラムでもGoogle社員さんが直々に対応されてますが、スレッド途中でも原因特定をしてらもうほどの再現性の無さ。 私もデスクトップのほうは、そんなことはなくノートPCのほうだけ、そうなって困ってました。 ◆対応方法 私はとりあえずこれで直りましたが、どうも画面描画のドライバと、あくまで予想ですが、Flashまわりがバッティングしてるのかと。たしかにFlashまわりが原因だと、Googleでも把握しづらいかも。 １．Chromeで、「chrome://flags」と入力。 ２．GPUアクセラレーションを「無効」にする。 公式フォーラムですとこ
Migemoでページ内検索するためのGoogle Chrome Extension - by edvakf in hatena
一応完成したので公開します。 MigemoFindInPage - Google Chrome 拡張機能ギャラリー 前に作った ChromeMigemo Extension に依存します。これがインストールされてないと動きません。 ページ内検索で、いつも「今自分はどこにいるの?」という感覚になるのが嫌いなので、驚きを少くするようにこだわりました。 見つかった語が現在見えてる画面外にあった場合、強制的にスクロールしない。 スクロールする場合はスムーズにスクロールさせる。 あとパフォーマンスはけっこうチューニングしたので、けっこう軽いと思います。標準のページ内検索だと「次の結果」(Mac だと Command+g) をずーっと押してるとものすごく重くなりますが、そういうことはありません。 キーバインドの変更はゆくゆく考えていきます。とりあえず当たり障りのなさそうなところを使うようにしました。
Yet Another Tombloo on Chromium: Taberarelooを公開しました - 枕を欹てて聴く
Yet Another Tombloo on Chromium, Taberareloo(タベラレルー) を公開します. Constellation/taberareloo · GitHub Taberareloo(タベラレルー)はクロスポストに特化したTombloo互換を目指すChromium Extensionで, 現在, browserActionがscriptableに動作できないという都合上, Link Post部分のみの移植となっています. そのためTaberarelooは現在, Tomblooのlink post部分の移植となっており, Reblogなどは出来ませんが, SBMへのクロスポストなどが可能になっています. browserActionがscriptableな動作可能になるか, もしくはbrowserActionがもう全くscriptableにする気はない! と断定
Firefoxにさようなら！Google Chromeで快適なブラウジングをするための拡張 21選 - あまたの何かしら。
注意事項 Version 4（開発段階）以降でないと使えないものばかり。 アンインストール方法 chrome://extensions/にアクセス Uninstallをクリック 一覧 Bookmark all tabs すべてのタブをブックマークに追加 googlemaps-latitude-longitude Google mapsに軽度と緯度を表示 ただし、google.comでのみ動作。 Web Developer Mini Chrome用開発ツール iMacros for Google Chrome 参考 : Firefoxを自動運転するツール、iMacros TabSearch 開きすぎたタブを探し出すためのextension。 Smoothscroll Chromeにスムーズスクロールを。 FlashBlock SilverlightやFlashを非表示にする。 Alt+Fでホ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tab Ahead
GitHub - ueokande/vim-vixen: Accelerates your web browsing with Vim power!!
Google Chromeでアドレスバーから検索した際、真っ白画面になる問題の解消方法 | kotaログ
SiteBlock