GitHub - r7kamura/hjklize: A chrome extension to provide ← ↓ ↑ → and H J K L keyboard shortcuts to major websites.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Responsive Viewer - Chrome Web Store
Show multiple screens once, Responsive design tester A Chrome extension to show multiple screens in one view. the extension will help front-end developers to test multiple screens while developing responsive websites/applications. icon by Dima Hamayunau (https://dribbble.com/abybe). Clarification on privacy: The extension does not track or collect any of your data, it's even not connected to any s
Browser Dev Tools: The Ultimate Guide 🔥
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
Record, replay, and measure user flows | Chrome DevTools | Chrome for Developers
Take a glance at the new Recorder panel (preview feature) with the video below. Complete this tutorial to learn how to use the Recorder panel to record, replay, and measure user flows. For more information on how to share the recorded user flows, edit them and their steps, see the Recorder features reference. Open the Recorder panel Open DevTools. Click on More options > More tools > Recorder.
Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも
Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも Googleは、来年1月に登場予定のChrome 97で、DevToolsにWebブラウザ上での操作内容を記録し、再実行や編集、保存などを可能にする新機能を搭載することを明らかにしました。 Introducing the new Recorder panel You can now record, replay and measure user interactions with @ChromeDevTools. See it in action - ordering coffee. Learn more about this preview feature (available in Chrome Canary now): https://t.c
RenderingNG | Chromium | Chrome for Developers
RenderingNG is a next-generation rendering architecture, that greatly outperforms what came before. RenderingNG was built over more than eight years and represents the collective work of many dedicated Chromium developers. It unlocks a huge amount of potential for fast, fluid, reliable, responsive and interactive web content. RenderingNG Here, you'll learn what we built, why we built it, and how i
RenderingNG architecture | Chromium | Chrome for Developers
Here you'll find how RenderingNG's component pieces are set up, and how the rendering pipeline flows through them. Starting at the highest level, the tasks of rendering are: Render contents into pixels on the screen. Animate visual effects on the contents from one state to another. Scroll in response to input. Route input efficiently to the right places so that developer scripts and other subsyste
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
貴方はいくつ知っている？あまり知られていない便利なChrome DevToolsの機能まとめ - Qiita
はじめに こんにちは、モチベーションクラウドの開発にフリーのフロントエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2019」10日目の記事となります。 概要 Web系の開発をしているエンジニアであれば、Chrome DevToolsをよく利用されている方も多いかと思います。 特にフロントエンドエンジニアであれば、毎日のように、お世話になっているのではないでしょうか？ しかし、Chrome DevToolsは多機能であるがゆえ、あまり知られていない機能も多いはず。 そこで、この記事では、私が普段よく使っている機能や、今年になって知った便利な機能、面白い機能をまとめて紹介して行きたいと思います。 Console編 CSS - consoleを華やかに console.log('%cHello Qiita',
Mouse Dictionaryの技術的な話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Mouse Dictionary Chrome拡張の高速な英語辞書ツールをつくりました https://qiita.com/wtetsu/items/c43232c6c44918e977c9 これ↑を作ったときの工夫とかの話になります。 ブラウザ拡張の開発に関する情報は、ふつうのWebフロントエンドの情報と比較するとなかなか見つかりづらいため、役に立つかもしれないと思いここに書き残しておきます。 ソースコード おおまかにいうと、ただのWebExtensionsプロジェクトです。が、とくに速度を出すために、ちらほらバッドノウハウ的なものも
Cacooの新UIを裏で支えるHeadless Chromeによる自動保存機能の実装 | 株式会社ヌーラボ(Nulab inc.)
こんにちは、Cacooチームの平山です。僕は対外的には技術のことをお話しする機会は最近はあまり無いのですが、今回はCacooのUIリニューアルに伴い追加された、内部的には「自動保存」と呼ばれる機能の技術的な仕組みについてお話しします。 皆さん（きっと）ご存知の通り、Cacooは2018年6月28日に全面的なユーザーインターフェースの刷新を行いました。これに伴い、以前は図の閲覧用と編集用に分かれていたページを、編集機能を持つ一つのエディタで担うという変更を実施しました。Google Docsをはじめとする、オンラインのドキュメントツールと同等のユーザー体験に倣うような変更とも言えます。 新しいユーザーインターフェースのエディター さて、以前からCacooを利用されている方はおそらくご存知かと思いますが、ダッシュボード（図の一覧表示）のサムネイルや、ブログ等に張り付けるための画像などは、図の編
Web制作者が知っておくと便利！Chrome 67でアップデートされたデベロッパーツールの新機能
先週末にリリースされたChrome 67でアップデートされたデベロッパーツールの新機能を紹介します。 Webの制作時に役立つ機能だけでなく、UIも進化しており、さらに便利になりました。 What's New In DevTools (Chrome 67) ネットワーク ヘッダとレスポンスを検索 CSS変数値のプレビュー機能 Copy as fetch Auditsパネルのアップデート 無限ループを停止する ダークテーマのアップデート ネットワーク ヘッダとレスポンスを検索 Networkパネルに検索機能が加わり、クエリのすべてのネットワークヘッダとレスポンスを検索できます。検索するキーワードは、正規表現にも対応しています。 Networkパネルを開き、command + F で検索。 「cache-control」を検索 SearchパネルUIのアップデート グローバル検索のUIが、ネット
Puppeteerを使用したHeadless Chromeの操作 - ZOZO TECH BLOG
こんにちは、フロントエンド開発部の荒井です。 先日VASILYでは開発合宿が行われました。本記事では私が合宿で使用したHeadless Chrome + Puppeteerを紹介したいと思います。 開発合宿のテーマ決め 合宿での開発内容は個人に委ねられており、普段出来ない開発を自由に行うことが出来ました。各々興味深いテーマを持ち寄っており、非常に面白い開発合宿でした。私も何をテーマにするか非常に悩みましたが、今後の業務のことも考え、久しく触れていなかったヘッドレスブラウザを使用した開発を行うことにしました。 ヘッドレスブラウザ GUIを持たないブラウザで、フロントエンドの自動テストやSPA（Single Page Application）のスクレイピングにも用いられます。ヘッドレスブラウザとしてはPhantomJSが有名だと思いますが、メインメンテナーが終了を宣言したため、今回はHeadl
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome Chrome 59 でリリースされますChrome ブラウザをヘッドレス環境で実行する方法です。 基本的に Chrome なしで Chrome をご利用いただけます。Google が提供する最新のウェブ プラットフォーム機能をすべて使用可能 をコマンドラインに追加することもできます。 なぜこれが有用なのでしょうか ヘッドレス ブラウザは、自動化されたテストやサーバー環境に最適なツールです。 表示する UI シェルは不要です。たとえば、特定の環境に対する PDF を作成することも、ブラウザで URL がどのようにレンダリングされるのかを調べることもできます。 Headless（CLI）の起動 ヘッドレス モードを開始する最も簡単な方法は、Chrome バイナリを開くことです。 使用できます。Chrome 59 以降をインストールしている場合は、--headle
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DevTools Tips: Record and replay user flows with the Recorder | Blog | Chrome for Developers
GitHub - cypress-io/cypress-chrome-recorder: Export Cypress Tests from Google Chrome DevTools' Recorder
GitHub - zalmoxisus/redux-devtools-extension: Redux DevTools extension.
GitHub - puppeteer/puppeteer: JavaScript API for Chrome and Firefox
Chrome Dev Summit 2014: Let's build some apps with Polymer!