mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
chrome devtools の tips N連発 - mizdra
mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
開発体験を変える! 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 を入力することで取得で
Google Chromeの複数の拡張機能で個人情報の窃取が行われていたことが判明、該当する拡張機能の総DL数は3300万回
Chromeウェブストアで公開されていたGoogle Chrome向け拡張機能の中に、スクリーンショットの撮影やクリップボードの内容取得、Cookieなどに保存されたトークンの取得、キーストロークの把握などを行うマルウェアが多数含まれていたことを、セキュリティ企業のAwake Securityが報告しています。 The Internet's New Arms Dealers: Malicious Domain Registrars | Awake Security https://awakesecurity.com/white-papers/the-internets-new-arms-dealers-malicious-domain-registrars/ Exclusive: Massive spying on users of Google's Chrome shows new se
Webページの特定のテキストにリンクを張れるChrome拡張機能、Googleが公開
米Googleは6月17日（現地時間）、Chrome拡張機能「Link to Text Fragment」をChrome Web Storeで公開した。Webページ上の特定のテキストへのURLを生成できる。 拡張機能をインストールしたら、リンクしたいテキスト部分を選択し、右クリックで表示されるメニューで「Copy link to Selected Text」を選ぶ。 これでURLが生成されるので、後はメールなりメッセンジャーなりにペーストするだけだ。例えば記事の途中などにもリンクできる。リンクをクリックすると、リンク先として選ばれた部分が黄色く表示される。 長い論文で参照したい部分の覚え書きにも使えそうだ。 筆者の環境では、Chromium版Edgeでも使えることが確認できた。 関連記事 「Chrome 83」の安定版公開 タブのグループ化、Cookie設定や安全性チェック、拡張機能管理の
Firefox 60の性能は1年前とは別物 Chromeを視界に捉える - Mozilla Flux
当ブログでは、Firefoxの延長サポート版（ESR）のメジャーアップデート時期を開発の区切りとみて、Web上で実行可能なベンチマークの測定結果を公開している。今回は、Firefox 60のパフォーマンスをFirefox 52およびChrome 66と比較する。 検証を行った具体的なバージョンを挙げると、32bit版Firefox 52.7.4（ビルドID：20180427222832）、64bit版Firefox 60.0 RC2（ビルドID：20180503143129）、それに64bit版Chrome 66（バージョン：66.0.3359.139）である。Firefox Quantumのリリースに伴ってマルチプロセス機能（e10s-multi）が全面的に有効化され、その前に64bit版への移行も開始された。今回のテストではそれらの点が反映されている。 動作環境についてだが、OSは64
ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar | DevelopersIO
ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar ヘッドレスChromeでシンプルに自動テストを行う Google Chromeのバージョン59から標準搭載された、ヘッドレスモード（GUIがないモード）。コマンドラインからヘッドレスブラウザを立ち上げることができ、スクリーンショットの撮影を行ったりDOMを出力したりすることができます。自動化の可能性に満ち溢れた機能です。 ヘッドレスChromeの導入については、次の公式ドキュメントが詳しいです。 ヘッドレス Chrome ことはじめ | Web | Google Developers ドキュメントを読んでいただくと分かると思いますが、様々なことが可能なため指示の記述が少し冗長な面があります。 そこでヘッドレスChromeを用いた自動化処理
Chromium Browserのカレンダー | Advent Calendar 2017 - Qiita
オープンソースのウェブブラウザ Chromium の実装や最近の動向に関するカレンダーです。参加者募集中! :) Chromium is an open-source web browser. These articles will introduce its implementation and the recent trend of the project. Anyone can join. We need more participants! :) Either Japanese or English is OK. Chromium Code Review Advent Calendar: https://qiita.com/advent-calendar/2017/chromium-codereview
Puppeteer (Chrome の自動操作ライブラリ) を Python に移植してpyppeteerという名前で公開しました - Blank File
Puppeteer というJavaScriptでchromeを自動操作するライブラリが最近話題になっていました。 私もPythonでSeleniumの代わりに使えるものがほしかったので、puppeteerをPythonに移植し、pyppeteerという名前で公開しました。 Puppeteerについては下記Qiitaの投稿が参考になるかと思います。 –headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita 使用上の注意 まだ作ったばかり＆テスト不十分なのでバグがあると思います。 なので試す時は「うまく動いたらラッキー」くらいの人柱精神でお願いします。 特にwindowsでは全くテストしていないので動かないかもしれません。 一応自分でwdomのテストに使ってみましたが、Webページのテストに使う分には意外と大丈夫です。
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome は Chrome 59 でリリースされます。Chrome ブラウザをヘッドレス環境で実行する方法です。基本的には Chrome を使わずに Chrome を実行しますこれにより、Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォーム機能がすべてコマンドラインに組み込まれます。 なぜこれが有用なのでしょうか ヘッドレス ブラウザは、UI シェルを表示する必要のない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、そのウェブページを PDF 化したりできます。また、ブラウザが URL をどのようにレンダリングするかを検査することもできます。 Headless（CLI）の起動 ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くこと
なにこれ、スゴすぎる！ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張 -Wildfire
ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ
GitHub の Issue リンクをリッチにする Chrome 拡張 - おなか周りの脂肪がやばい
どうもこんにちは、今日は便利な Chrome 拡張のご紹介です。 これは GitHub 上の issue link （#666 とかっていうやつ）を情報量の多い、見やすいバッジに変換してくれる拡張です。 親イシューにいくつかイシューをまとめて管理したいときに、イシューの状態（open/close や assignee ）が一目でわかってとても便利。 Chrome 拡張の permission の関係で GitHub 用と GitHub Enterprise 用の二つをご用意しております GitHub Issue Badges - Chrome ウェブストア permission が https://github.com のみ GitHub Issue Badges (for Enterprise) - Chrome ウェブストア permission が https://*/* になってい
ブラウザ拡張の権限でどこまで悪いことをできるのか？とその対策【デモあり】 - Qiita
[2018/07/07 追記] 本記事ではChrome拡張について説明していますが、Firefox1やEdgeの拡張機能もほぼ同じ仕組みで動いています。 [2023/11/06 追記] #参考 ページを追加しました。 Chrome拡張。便利な機能を簡単に追加できるので使っている人も多いと思います。 ただ、インストール時の権限の注意書きが分かり難いので無条件に承認（追加）していることもあるのではないかと思われます。 そこで、本記事ではChrome拡張の権限の種類・確認方法の他、拡張がどこまで（悪いことを）できるのかとその対策を3段階の権限（危険性）レベルごとに紹介していきたいと思います。 便利だが危険性もあるChrome拡張 Chrome拡張をインストールすると、Webページを読むというブラウザ本来の機能だけでなく様々なことができるようになります。 例えば、Webメールの新着通知や記事などの
【Vimium Chromeプラグイン】vimキーバインドでブラウザ操作
みなさん、コウタロウです！！ 今日はタイトルについて。 Chromeプラグイン「vimium」のご紹介。 ブラウザでGoogle検索して目的のページに飛ぶのにもうマウスは必要ありません！！ まるで魔法使いのようにブラウザを縦横無尽に移動することができます！！ 【目次】 Vimとは？ ITで技術系の方であればご存知でしょう！！ Vimとはエディタです。 操作モードと入力モードがあり、操作モードではマウスやキーボードの矢印を使わずに上下左右への移動を全てキーボードのみで行えます。 「j」を押せば一つ下へカーソルが移動。 「k」を押せば一つ上へカーソルが移動。 「h」を押せば一つ左へカーソルが移動。 「l」を押せば一つ右へカーソルが移動。 覚えるまでは大変ですが、一度覚えてしまえばもう他のエディタは使えないくらいの威力を持っています。 ChromeプラグインのVimium Vimの操作モードを実
文書校正ツール textlint の Chrome 拡張を作った - もなでぃっく
以前、プラグインで拡張可能な文章校正ツール textlint で小説の作法を検証するための規則を作ったのですが、textlint はコマンドラインツールであるために利用するまでのハードルが高い状況でした。 Sublime Text や Atom などのプログラマ向けエディタを利用していれば、textlint のプラグインが使えたりするのですが、今回はより簡単に利用できるように Chrome の拡張機能として textlint をブラウザ上で使えるようにしてみました。 インストールはこちら: 【Chrome ウェブストア】 textlint: 文章チェッカー インストールすると、ページ内の編集領域で文章入力中にリアルタイムで校正してくれるようになります。（もちろん ON/OFF できます） textlint に最近追加された自動修正機能にも対応しているので、ボタン一発で自動で修正されたりしま
既存のコードの理解が捗るChrome DevToolsの使い方 - kitak blog
jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。 そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れようとすると自分自身のコードの理解が進んでおらず「えーっと...」となってしまった。 上記以外にも、長年、多くの人が触れてきたJavaScriptのコードに機能を追加する、修正するのはなかなか難しいのではないか、と思う。最初は、ちょっとしたユーザビリティの向上のために書かれたスクリプトが、気がつけば多数のDOM操作、至る所で宣言される変数、どこから実行されるか分からない関数群で無秩序に膨れ上がり、頭を抱えることになる(そうならないようにするのがウェブフロントエンジニアがいるひとつの理由ですが…)。 これらのケースでは、まずは修正、あるいは
ダブルクリックするだけで英単語の和訳をポップアップ表示できるGoogle公式拡張機能「Google Dictionary」 - GIGAZINE
英語のウェブページを読んでいるときにわからない英単語があると、コピーしてから別タブを開いて辞書サイトなどで日本語の意味を調べる、という行動が必要です。知らない英単語が多すぎると、英語のページと辞書サイトを何度も往復せざるを得ないわけですが、単語をダブルクリックするだけでページ上にGoogle翻訳から和訳をポップアップ表示できる無料のChrome拡張機能が「Google Dictionary」です。 Google Dictionary (by Google) - Chrome ウェブストア https://chrome.google.com/webstore/detail/google-dictionary-by-goog/mgijmajocgfcbeboacabfgobmjgjcoja Google DictionaryをChromeにインストールするため、「CHROMEに追加」をクリック
Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック
Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Disable Chrome Automatic Updates in Mac
https://www.eisbahn.jp/yoichiro/yoichiro/2016/11/chrome_apps_has_gone.html
Webブラウザーの動作を妨げる迷惑ソフトを一掃してくれるGoogle製のクリーナーツール - 窓の杜