Awesome Dev Tool Tips 🔥
Contents (Click to expand) ↕️ Design Mode Pretty Print Command Pallet and Super Search Snippets Live Expressions Tracking Changes Console Shorthand Find Unused Code Rendering Panel Network Paint Times Network Timings Inspect Network Requests Performance Identifying Memory Leaks Raw Memory Inspection Test bfcache Full Refresh Lighthouse Page Size Breakdown Record User Flows Advanced User Flow Opera
Connecting Puppeteer to Existing Chrome Window
<update>Puppeteer 1.2.0 won’t work. Use 1.4.0 instead.npm install puppeteer@1.4.0 Although there is a ‘high’ severity audit notice on install, if run on a local machine it should be safe enough. AlsoInstructions for Windows have changed. I’ve updated story below. </update>By itself Puppeteer (https://github.com/GoogleChrome/puppeteer) is a great tool created by Google to assist with automated UI t
2016年度版 僕が考えたChrome拡張機能を作るときのデザインパターン
2016年度版 僕が考えたChrome拡張機能を作るときのデザインパターン Written on Jan 24, 2016. Posted in Chrome extension 4年近く前の2012年に僕が考えたChrome拡張機能を作るときのデザインパターンというエントリを書きました。最近参加したイベントで「よういちろうさんの拡張機能の記事見て作ってみました〜」と声をかけてくれた人がいて嬉しかったのですが、2012年のそのエントリは、すでに内容が古くなってしまっています。最近の状況を踏まえて、内容を新しくした「2016年度版」を書いてみようと思います。 変更しようと思った点は、以下です。 prototype.jsは使わず、ECMAScript 2015で書く。 Background Page(常駐型)ではなく、Event Page(非常駐型)にする。 そもそも最初のコードセットは自分で
node.jsのモジュールを使ってChrome拡張機能を作る - Qiita
久々にChrome拡張機能を作ろうとした時、node.jsのパッケージとか使ってES2015で書きたいなーと思って探してみたところ、generator-chrome-extension-kickstartというめっちゃ便利なテンプレがあったので紹介したいと思います。 どういうもの？ generator-chrome-extension-kickstartはyeomanという雛形生成ツールを使って、gulp、webpack、babelが使えるChrome拡張機能開発環境を構築してくれます。 これを使う利点は、node.jsのモジュールが使える、ES2015で書けるといったことが挙げられます。(ES2015に関してはブラウザが対応しつつありますが…) また、gulpでwatchしておくと、コード編集後にすぐにブラウザで試せるので、とても便利です。 また、Chrome以外にもFirefoxやOp
Python + Selenium で Chrome の自動操作を一通り（ログイン、ダウンロード、他）
はじめに Python + Selenium + Chrome で、要素の取得、クリックなどの UI系の操作、待機、ページ全体のスクリーンショットなど、一通り試してみます。 PhantomJS はもう更新されないということなので、ブラウザは Chrome にします。 この記事には、Selenium の API に関する情報と Chrome に特化した情報がありますが、前者の Selenium の使い方に関する情報は Firefox など別のブラウザでも使えます。 注意事項 ウェブの自動テストやスクレイピングで使われる技術です。特にスクレイピングでは、著作権の問題や、サーバー側の負荷、各種規約（会員としてログインする場合の会員規約等）やマナーなどを考慮する必要があります。 たとえば、Twitter など利用規約で明示的にスクレイピングが禁止されていることや、robot.txt などでクローリ
Feedly にフィードを登録する Google Chrome 拡張機能の設定方法 | R
先日、Chrome のプロファイルを新しくしたため、「RSS Subscription Extension（by Google）」の設定が消えてしまったので、設定し直したついでにメモしておきます。 Mac で Google Chrome を使っているときにシステムごとフリーズしてしまう場合の対処法 | R まずは拡張機能を Chrome にインストールChrome ウェブストア – RSS Subscription Extension（by Google） こちらで、インストールします。 インストールすると、オムニボックス（アドレスバー）にアイコンが現れます。 RSS Subscription Extension（by Google）の設定RSS Subscription Extension（by Google）はデフォルトでは、「Bloglines」と「My Yahoo」しか設定されてい
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
Headless Chrome をさわってみた | CYOKODOG
Headless Chromeのリリースをうけて、PhantomJS のメンテナーが開発の終了を宣言したりとか、ちょっと話題になった Headless Chrome について試してたことをメモっておく。 試したやつのリポジトリ：https://github.com/cyokodog/headless-chrome 概要 ヘッドレス（GUIを表示しない状態）で実行できる Chrome の機能 Chromium と Blink が提供する機能をコマンドラインで利用できる Chrome 59 から利用可（2017/06/08時点ではMAC、Linuxのみ） 活用例 ウェブページのテスト 表示・動作テスト、画像やPDFによる画面のスクリーンショット スクレイピング 認証が必要なサイトでも対応 ヘッドレスで起動する --headless フラグと --disable-gpu フラグ（そのうち指定不要
headless chromeをPythonのseleniumから動かして引数を考えた (Ubuntu 16.04) - Stimulator
- はじめに - Chrome 59が正式版となりheadless版も正式に動き始めました。めでたい。 New in Chrome 59 | Web | Google Developers headless chromeをUbuntuに導入してPythonから触ったという記事です。 Ubuntuへの導入から、実行時の引数となるargsの考察などを含みます。 スクレイピング関連記事です。 vaaaaaanquish.hatenablog.com - インストール - まずPythonからの起動に必要なchromedriverを取得しておきます。 apt-getでも入りますが最新版が欲しいので以下のように。 (記事書いた当時で最新版は2.29) wget https://chromedriver.storage.googleapis.com/2.29/chromedriver_linu
GitHub スタイルでリポジトリ名をコピーする Chrome 拡張を作った - ちなみに
たとえば https://github.com/hisaichi5518/acme-imouto みたいなリポジトリがあったときに、hisaichi5518/acme-imouto だけが欲しいときがよくある。 これまでは手動でコピーしていてけっこう面倒くさかったので Chrome 拡張を作って楽をすることにした。(もしかしてすでになんかにいい方法あったりします？) メモ Chrome 拡張を作るのは初めてだったので、作り方から調べてコピペしながらなんか適当にやったら出来た。JavaScript が苦手すぎてめちゃくちゃ愚直な実装になっているけれど、求めていたことは出来ているのでよしとしたい。 コピーするところは chrome-extension - Chrome Extension で content_scripts から clipboard を使う - Qiita を参考にさせていただ
Chromeの「新しいタブ」画面でブックマークレットが動かない | 怠けblog
ブックマークレットをたまに自作するんですよ。PBWには特に相性がいいんで。 んで、すっかりChrome使いなんだけど、空ページはデフォの例の「新しいタブ」を開くようにしてるのさ。chrome://newtabって奴。 だが、そこでブックマークレット発動しようとすると、さっぱり反応しないのである。何だろうこれ。 Chromium方面で調べてみたら、chromeスキームのページではJavaScriptなURLを叩いても発動させない仕様、らしい。 さらに、この仕様を変更する気は無いと書かれてて、いやその仕様は不便だし何とかならんのって誰かが言ったら、セキュリティの都合なんでブックマークレットとか作ってないでChrome拡張でも書きなよ便利だよ、と返されて終わっていた。いや、ブックマークレットはクロスプラットフォームだし、作るのも手軽だし、結構別物だと思うけど…。 で、場合によってはdataスキー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Unpaywall
httpsでもTwitterページでもはてブ数を表示できるChrome拡張機能を作った
Feedly をはてブ対応させる Chrome エクステンション