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）をクリックします。
Chromebookを快適な開発環境にするためのプチノウハウ群（2024年2月版） - Qiita
Chromebook歴も10年ぐらいになりました 4年使用したPixelbook Goに変わってメインマシンとなったASUS CX3402。CPUの世代が4つ上がってファン付きになったのでおおよそどのベンチマークでも2-3倍のスコアが出ていて快適😭。ちなみにこのマシンからLinuxコンテナは複数使い回すことにして、よく変える環境と実験の環境は分けることにした。 pic.twitter.com/BcMbcvIilI — Taiki Komoda (@komde) February 18, 2024 #Pixelbook go 到着。到着して開封して起動して5分で(アップデート走ったので、通常なら2分)仕事再開できるのホント生産性高い。hp x360 14 はTDP高いi3でOctaneで5000ぐらいスコア高かった(32000)けど、Pixelbook go m3のほうが体感スピード速い。
Chrome 80が密かに呼び寄せる地獄 ～ SameSite属性のデフォルト変更を調べてみた - Qiita
Chrome 79以下や他ブラウザのデフォルト値。 Chrome 80からこの値を設定する場合、Secure属性も必須となる。 Aサイトに対し、Bサイトからどのようなリクエストがあっても、発行したサイトでCookieヘッダーに含める (Cookieを使用する) 図にすると以下のようになります。 Strict 外部サイトからのアクセスではCookieを送らない。 Lax 外部サイトからのアクセスはGETリクエストのときだけCookieを送る。 None 従来通りの動き。 【追記】なおChrome 80以降でSecure属性を付けずSameSite=Noneを指定した場合、set-cookie自体が無効になります。 セキュリティ上の効果 CSRF対策になります。 CSRF (クロスサイト・リクエスト・フォージェリ) とは、 WEBサイトがユーザー本人の意図した動作であることを検証していないため
Playwright | CSS-Tricks
So Microsoft launches a Node-based browser automation project called Playwright. It allows you to spin up a headless version of a browser and control it. Go here! Click something! Take a screenshot! That kind of stuff. Particularly useful for testing. It’s just like Google’s Puppeteer, only instead of being Chrome-only, it also “works” in Firefox and Safari. The drama started immediately. The laun
Next.jsを使用してGoogle Chromeの拡張機能を作るとレイアウトとルーティングができるので結構楽に拡張の開発ができる。 - Qiita
Next.jsを使用してGoogle Chromeの拡張機能を作るとレイアウトとルーティングができるので結構楽に拡張の開発ができる。ReactNext.jsアドベントカレンダー2019 はじめに @yushimatenjinです。Next.jsアドベントカレンダー4日目ですね。 Next.jsを使うと簡単にGoogle Chromeの拡張機能が作れるんじゃないかなと思ったら簡単に作ることが出来たのでその紹介を今回しようかなと思います。 このときに得た知見をもとに書いています。 Google Chrome 78にアップデートされたところ、今まであった、現在開いているタブ以外を閉じる機能がなくなっていて作業がはかどらなかったため、Chrome Extensionsを作ってみました。 アイコンを押すとすべてのタブを閉じるだけです ↓ダウンロードhttps://t.co/oBt2S62m9F pi
HTTP クッキーをより安全にする SameSite 属性について (Same-site Cookies)
1. HTTP クッキーの基本動作HTTP クッキー（以下クッキーと書きます）とは、ウェブサーバー側がクライアント（ウェブブラウザ）側に保持させることができるデータのことをいいます。 クッキーの基本的な動作は以下となります。 (1) ウェブブラウザで サイトA にアクセスする ウェブブラウザで、例えば https://misc.laboradian.com/ にアクセスします。 これは言い換えると、「https://misc.laboradian.com/ というリソースを取得するためのリクエストを misc.laboradian.com というサーバー（ホスト）に送信した」ということになります。 (2) サーバーは、要求されたリソース（ページ）を返す サーバーは、要求されたリソース（ページ）を返しますが、このレスポンスにおけるヘッダ部にクッキー（と呼ばれるデータ）をセットして返すことがで
Google Developers Japan: 新しい Cookie 設定 SameSite=None; Secure の準備を始めましょう
.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
Dark Reader
すべてのウェブサイトにダークテーマを適用します。夜間や毎日のブラウジングにDark Readerを使用し、あなたの目を気遣います。
Release v2.0.0 · puppeteer/puppeteer
Big changes Chromium 79.0.3942.0 (r706915) Puppeteer now requires Node.js v8+; Node.js v6 is no longer supported page.screenshot now clips elements to the viewport (#5080) New APIs: page.emulateTimezone(timezoneId) page.emulateMediaType(type) (superseding the old page.emulateMedia(type) API) page.emulateMediaFeatures(features) API changes New API: page.emulateTimezone(timezoneId) (#4949) New API:
【拡張機能不要】Chromeでスクロール必須の長いページ全体を1回でキャプチャする
たいていWebページの長さに比べるとディスプレイの高さが足りないため、そこに表示されるWebブラウザではページ全体を見るのにスクロールを繰り返す必要があります。しかしOS標準のキャプチャー機能では、撮る瞬間に表示されている領域しかキャプチャーできず、スクロールするまで隠れている（表示されていない）領域は撮れません。 かといって、手動でスクロールしながらキャプチャーを繰り返し、後で全スクリーンショットをつなぎ合わせる、なんて作業は非常に面倒です。 そこで本稿ではWindows OS版およびmacOS版Google Chrome（以下、Chromeと略）を対象として、Webページ全体をキャプチャーする方法を紹介します。拡張機能は使わず、Chrome標準装備の「デベロッパーツール」のみ用います（デベロッパーツールは開発者に限らず、利用者でも使用できます）。またPC向けとスマホ（スマートフォン）向
NodeでChromeを操作してTwitterシェア用画像を生成するサーバー作った - Crieit
Node.jsにはPuppeteerという画面を表示せずにChromeを扱えるライブラリがあります。それを利用し、URLをパラメータとして与えるだけでスクリーンショットを画像としてブラウザで表示させることができるサーバーアプリケーションを作成しました。 実際にこのような画像が作成できます。例として下記はボード内投稿にコードを入れた場合に表示される画像です。 下記は記事の画像です。 HTML, CSSから生成しているためドロップシャドウとかもこんな感じで簡単に効かせる事ができています。 GitHubで公開していますので、とりあえず使って見たいという方は記事を読み飛ばして最後の方にあるリンクをご利用ください(こらえきれぬ涙で頬を濡らしながら) 何が便利なのか WebサービスのURLをTwitter等でシェアするだけで、URLだけでなくツイートに画像も表示されるのをよく見ると思います。 これは画
Chrome 73 で Desktop PWA Support & mdbuf アップデート - mizchi's blog
developers.google.com Signed HTTP Exchange もですが、個人的に待望だった Desktop PWA が正式リリース。 PWAアプリをウェブアプリのように振る舞わせることができます。 例えば mdbuf を開いて、「mdbuf をインストール」を選択すると… モーダルが出て Win/Mac のアプリのように立ち上がります mdbuf について https://mdbuf.netlify.com サンプルで紹介しましたが、これは僕が作ってる markdown のプレビューツール です。 amachang さんや結城浩先生へのインタビュー、その他このブログの記事、各種書籍への原稿も全部これで書いています。 mdbuf v1.0.0: 最高の Mardkown Preview を目指して - mizchi's blog この時点からさらに自分で使い込みながら
Dockerコンテナ内でpuppeteerを使うとChromeゾンビプロセスがたまる問題 - その手の平は尻もつかめるさ
表題のような問題があり，その調査したという記録です．なお，結論を一言で言うと--initを使え，ということになります． そもそもDockerコンテナを起動すると，CMDあるいはENTRYPOINTに指定されたコマンドがコンテナ内でPID 1として起動します．これが何を意味するかと言うと，「CMDあるいはENTRYPOINTに指定されたコマンド」はそのコマンド自体の責務をまっとうするのと同時に，initプロセスとしての振る舞いも行わなければならないということになります (id:hayajo_77さんにこの辺を詳しく教えてもらいました，ありがとうございます)． つまりPID 1で動いているプロセスは「SIGCHLDをトラップすることで孤児プロセスを適切に回収し，waitpidをかける」という処理も適切に行う必要があります． さて，puppeteerを使ってChromeブラウザを起動するとどうな
Puppeteer on LambdaでWebページのキャプチャを撮る | PRESSMAN*Tech
AWS Lambdaで遂にNode v8.10を使用できるようになりました。 これでPuppeteerが使える！と意気揚々としていたのですが、いつの間にか必須要件がv6.4.0以上となっていました。以前はv7.10以上必須と書かれていたはずですが・・・ いきなり出鼻を挫かれましたが、気を取り直していきます。 はじめに：PuppeteerとはGoogle謹製のGoogleChromeを自動操作するライブラリです。Nodeで動作します。 「このサイトにアクセスして、このボタンをクリックして・・・」といった操作を自動で行うことができます。雑に言うとExcelのマクロみたいなものです。 Chrome59で実装されたヘッドレスモードに合わせる形でプロジェクトが立ち上がり、主にWebアプリの自動化テストの分野で注目されています。 似たプロジェクトにPhantomJSやChromelessがあります。
Puppeteer on AWS Lambda で日本語対応したキャプチャを撮影してS3にアップロードするまでの設定 - Qiita
はじめに この投稿では以下の内容を説明しています。 AWS Lambda に Headless Chrome をインストールし、キャプチャした画像を S3 にアップロードします。 自動化スクリプトは Puppeteer を使用します。 何もしないと日本語が文字化けして豆腐が表示されるので日本語のフォントが Lambda 実行環境の Headless Chrome で表示できるようにします。 前提条件 Lambda 実行環境で Node v8.10 が実行できること S3 バケットと accessKeyId, secretAccessKey 使用するパッケージ @serverless-chrome/lambda@1.0.0-38 puppeteer@1.2.0 aws-sdk@2.304.0 プロジェクトの作成 パッケージをインストール 必要なパッケージをインストールしていきます。 serv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bug: DevTools tabs don't show up sometimes in latest release · Issue #19002 · facebook/react
Chromeで外部アプリ起動時の確認画面を非表示にする方法
Tampermonkey
Project Tab Manager
Add puppeteer-screenshot by styfle · Pull Request #207 · vercel/now-examples
