Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保
Note 2024/09/21 現在、カスタマイズ可能な <select> 要素は Chrome Canary の v130 以降で Experimental Web Platform Features フラグを有効にすることで利用可能です。 従来の <select> 要素は CSS を利用したスタイルを適用できないため、多くの開発者にとって課題となっていました。この課題を解決するために JavaScript を用いて独自のセレクトボックスを実装することが一般的ですが、この方法はアクセシビリティやパフォーマンスの問題を引き起こすことがありました。 この問題を解決するために新しい既存の <select> 要素をカスタマイズする手段が提案されました。<select> 要素と ::picker(select) 疑似要素に対して appearance:base-select を指定することで、開発
ブラウザ上のタブ管理を自動化しよう！Chromeの拡張機能「AcidTabs」を使ったら、画面がスッキリした | ライフハッカー・ジャパン
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
Chrome129 で calc-size() 関数がデフォルトで使用可能になります。 可変のボックスに対するアニメーション付与がかなり楽になる予感がするのでご紹介します。 calc-size() ってなに？ 固有サイズの設定キーワードが指す実際の数値を、計算に利用できる関数です。 固有サイズの設定キーワードの例として次のようなものがあります。
以下の文章は、電子フロンティア財団の「Google Breaks Promise to Block Third-Party Cookies」という記事を翻訳したものである。 Electronic Frontier Foundation 先週、Googleは方針を転換し、Chromeでサードパーティクッキーをブロックするという長年の約束を撤回した。この決定は、ユーザのプライバシーに悪影響を及ぼす一方、Google自身のビジネスには大変に都合がいい。サードパーティクッキーは、企業が監視や広告ターゲティングを目的として、広範囲に及ぶユーザのオンライン活動を詮索できるトラッキング技術だ。これらのクッキーがもたらす消費者への悪影響は長年にわたって詳細に記録されていて、SafariとFirefoxはすでに2020年からサードパーティクッキーをブロックしている。Googleもこの事実を認識しており、20
![またしてもプライバシーより自社の利益を優先したGoogle――サードパーティークッキー廃止を撤回 | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/ff20e69c86d98515bcd9395de56c93113beb00e8/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F08%2Fgoogle-spy-eye.png)
前提知識 これから書くことがナンノコッチャわかる自信がない方は、Ubuntu Weeky Recipe 第717回を読んでください。 2年以上前の記事ですが、現状もあまり違いはありません。snap版Firefoxは現在はネイティブWaylandで動作するようにはなりました。すばらしいですね。 概要 前提知識にもあるように、ChromiumはデフォルトでXwaylandで動作します。この状態でスケールをいじると文字がぼやけます。これはどちらかといえばXwayland側の制限です。 ChromiumのツールキットであるところのOzoneはWaylandにも対応していますが、そうすると今度は日本語入力に問題が発生します。ただしこれはGNOME（正確にはウィンドウマネージャーのMutter）マターの話で、KDE Plasmaでは特に問題ありません。これは単純にGNOMEではtext-input-v
アップデートでフォント変わった!? Chromeのフォント設定を確認、変更する方法：Google Chrome完全ガイド Google ChromeがVer.128以降にアップデートされてから、Webページのテキスト表示に何か違和感を覚えることはないでしょうか？ それはフォント設定が変わったせいかもしれません。Chromeのフォントの設定を確認、変更する方法を説明します。
Googleパスワードマネージャーでパスキーを保存してWindows・macOS・Linux・Androidで同期可能に
パスワードに代わる認証技術として期待される「パスキー」は、これまでAndroidでのみGoogleパスワードマネージャーに保存可能でしたが、このたびWindows・macOS・Linuxでも保存ができるようになり、OSを越えた端末間での同期が可能になりました。 More users can now save passkeys in Google Password Manager https://blog.google/technology/safety-security/google-password-manager-passkeys-update-september-2024/ Manage passkeys in Chrome - Computer - Google Chrome Help https://support.google.com/chrome/answer/1316802
サードパーティーCookieでユーザーのプライバシーを侵害し続けるChromeの「関連ウェブサイトセット(RWS)」とは？
プライバシー重視のウェブブラウザとして知られる「Brave」が、セント・アンドリュース大学、インペリアル・カレッジ・ロンドン、香港科技大学の研究者と共同でGoogleの「関連ウェブサイトセット(RWS)」について調査を実施し、ユーザーの意図しない形でプライバシー侵害が行われていると指摘しています。 Chrome is Entrenching Third-Party Cookies For Some Sites In A Way That Will Predictably, Inevitably Mislead Users | Brave https://brave.com/blog/related-website-sets/ Googleは2020年にサードパーティーCookieを廃止すると発表しました。これはサードパーティーCookieがプライバシーおよびセキュリティに悪影響をおよぼすた
2024年8月頃から、PC版Google Chrome 128のアップデート後、フォントの設定が変更され、テキストが太字で表示される事例が報告されています。SNSでは「Chromeのフォントが変わった」「Chromeがアップデートで太字になった」といった投稿が増えています。 PC版Google Chromeのフォントが変更、太字になる問題 PC版Google Chromeをバージョン128にアップデートすると、フォントの設定が変更される場合があり、環境によってはウェブサイトのテキストが太字で表示される問題が報告されています。 実際に筆者が使用している、Windows版Google Chromeをバージョン128にアップデートしてみたところ、固定幅フォントが「MS Gothic」から「BIZ UDGothic」に変更されていることを確認しました。 筆者の環境では、固定幅フォントが「MS Go
Chromeを使っている人も多いとは思いますが、ブラウザに関してはそれ以外の選択肢もあります。中でも私の一番のおすすめはFirefoxです。 ChromeからFirefoxに乗り換えるべき理由まず知っておきたいのは、Chromeに代わる選択肢として人気のあるブラウザの中にはChromiumベースのものがある、ということです。Chromiumはオープンソースのブラウザエンジンですが、開発元はGoogleです。 Google Chromeに関して大きな変更が発表されれば、Brave、Opera、Microsoft Edgeといった、Chromiumベースの人気ブラウザにも影響があることを覚悟しておきましょう。 一方、FirefoxはChromiumを採用せず、Geckoという独自のブラウザエンジンを使っています。つまり、Chromeがまもなく実施予定の、広告ブロッカーや拡張機能を妨害するような
Chrome“一強”、Webの進化は停滞した？「ブラウザの母」が語る、閉塞感を打破する鍵【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスChrome“一強”、Webの進化は停滞した？「ブラウザの母」が語る、閉塞感を打破する鍵【フォーカス】 一般社団法人 WebDINO Japan 代表理事 瀧田 佐登子 国内大手IT企業でUNIX・インターネット事業に携わった後、米 Netscape 社でブラウザ製品の国際化・日本語化に従事。その後、 Netscape のソースコードを引き継ぐかたちで誕生したオープンソースブラウザ Firefox のリリースを機に、米 Mozilla 財団 （ Mozilla Foundation ）が設立されたのを受け、その日本支部として、2004年に Mozilla Japan を設立。代表理事として、 Mozilla の製品・技術の普及のみならず、Web標準技術やオープンソースの推進、Webの新たな可能性の探求や人材育成などにも取り組む。2017年7月より、社名を一般社団法人 Web
Google、macOS 15 Sequoiaで導入された画面収録の許可を毎月求めるプロンプトに対応するため「Google Chrome」でScreenCaptureKitの利用を実験的に開始。
GoogleがmacOS 15 Sequoiaで導入された画面収録の許可を毎月求めるプロンプトに対応するため「Google Chrome」でScreenCaptureKitの利用を実験的に開始しています。詳細は以下から。 Appleが現地時間2024年09月16日にリリースした「macOS 15 Sequoia」では、セキュリティの向上を目的としてレガシィなScreen Recording APIを利用するアプリに対し1ヶ月毎にユーザー承認を求めるプロンプトが表示され、 承認を行わないと画面収録が出来なくなため開発者からはユーザー体験を損なうとして批判が出ていますが、Googleは同社のWebブラウザ「Google Chrome」でこの問題に対応するため、Appleの最新のScreen Recording API「ScreenCaptureKit」の使用を実験的に開始したと発表しています。
Chrome 129 Betaで追加されたCSSプロパティinterpolate-sizeとcalc-size()とは？
Chrome 129 Beta Chrome 129 Betaが2024-08-21にリリースされました。 position-area の名称変更や Intl.DurationFormat の追加といったアップデートが盛り込まれています。 本記事では、アップデートの中でも特に実験的な機能のひとつである interpolate-size と calc-size() について紹介します。 前提知識: intrinsic-size(内在サイズ) intrinsic-sizeはピクセルや一般的なパーセンテージ指定のような外部レイアウトに依存したサイジングではなく、要素に含まれるコンテンツの大きさを基準に要素のサイズを変更する仕組みです。 現在、auto や min-content、max-content といったキーワード値がこれに該当しており、それぞれ要素内コンテンツの折り返し可能なサイズを基準
Request for developer feedback: customizable select | Blog | Chrome for Developers
Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype fo
Chrome is Entrenching Third-Party Cookies For Some Sites In A Way That Will Predictably, Inevitably Mislead Users Summary This post presents research on the privacy harms and risks of Google’s recent Related Website Sets feature, to be presented at the 2024 Internet Measurement Conference. The research finds both that the Related Website Sets feature would reverse some of the privacy benefits of d
Introducing hints, Related Origin Requests and JSON serialization for WebAuthn in Chrome | Blog | Chrome for Developers
Hints: Hints give relying parties (RPs) better control over WebAuthn UI in the browser. They are especially helpful for enterprise users who want to use security keys. Related origin requests: With related origin requests, RPs can make passkeys valid on multiple domains. If you own multiple sites, you can now enable your users to reuse their passkey across your sites, eliminating login friction. J
■チャンネル登録はこちら→https://www.youtube.com/@ウェブマニア/?sub_confirmation=1 ■Xはこちら→https://twitter.com/webmaniasns ＜今回の動画について＞ Visi OSという拡張機能を徹底解説しています。 このVisi OSめちゃくちゃ便利です。 一言で表せないぐらい便利な拡張機能なので、ぜひ動画をご覧になってみてください笑 Visi OSダウンロードサイト；https://chromewebstore.google.com/detail/visios-tab-bookmark-manag/gjoimbbkllocghfkbjdfjeakcgnkglgd?hl=ja Visi OS公式サイト：https://beta-japan.com/?l=ja Visi OS開発者さん：https://x.com/Exi
Get live, in-meeting transcriptions and insightful AI summaries - ensuring you always take the right actions and get more out of your meetings.
不完全な僕を一人前にしてくれる業務効率化アプリ・拡張機能【エンジニア向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
画面の操作をドラッグせずにキーボード上のみでできるのがすごく便利です。 複数のモニター間の移動やウィンドウの全画面表示、オンライン会議の際に画面共有をしているモニターに見せたいウィンドウを移動するときなどに、動作がとてもスムーズにできるので重宝しています。 画面の移動の時間が格段に早くなるので、要領がとても悪い私でもなんか効率よく作業ができた気になれるのでおすすめです。 ダウンロードこちらから コピー履歴を残してくれる「Clipy」（Macのみ） コピーした履歴を30件まで記憶してくれます。 なにかとコピペが多い業務の中で、何回も同じ言葉をコピーする必要がなくなります。 キーボード操作がまだおぼつかない私はcmd+vを押そうとしてcmd+cを押してしまい、再度コピーをしにいかないといけないみたいなことが頻繁に起きるのでとても重宝しています。 また、スニペット機能があり頻繁に使うもの（メルア
Linux上のブラウザでのプロキシの設定方法
●Braveブラウザ 参考URL：Configure Proxy for Chromium and Google Chrome From Command Line on Linux Linuxのシステムの設定でプロキシを設定済みであっても、プロキシを使用しない（ダイレクト）形で接続していまいます。 ターミナルで下記のように実行します。 $ brave-browser-stable --proxy-server="http://proxy-ip:proxy-port" & # エラーを出力させたくない場合 $ brave-browser-stable --proxy-server="http://proxy-ip:proxy-port" > /dev/null 2>&1 & ターミナル上にエラーが出力されますが、問題なく利用できます。 libva error: vaGetDriverName
ニコニコ動画・ニコニコ生放送をPinPで再生 ニコニコ動画およびニコニコ生放送の動画をコメント付きでPinP（ピクチャーインピクチャー）表示する非公式拡張機能です。 動画プレイヤーのツールバーに、ピクチャーインピクチャーのボタンを追加します。 【重要】このブラウザ拡張は非公式です 機能説明 ニコニコ動画でコメント付きPinP ブラウザに搭載の通常のPinPでは動画のみの表示となり、動画の上にコメントを表示したままPinPすることができません。 nicopip を使うことでコメントがついたまま PinP を行うことができます。 利用方法はカンタン。拡張をインストールすることで動画プレーヤーの右下に追加される [非公式] PinP ボタンを押すだけ！ ニコニコ生放送にも対応 ニコニコ生放送にも対応。コメントに加えてギフト表示にも対応しています。 ※セキュリティ的なアレコレの都合上、ニコ生ゲーム
Blink CJK Default Fonts
THIS DOCUMENT IS PUBLIC Blink CJK Default Fonts Oct 2023, kojii@ Overview Blink reviewed and revised the CJK font list at crbug.com/579842 for Windows 10. It’s been 7 years and situations have changed, such as more available fonts, higher DPI screens becoming more common, regulatory landscape, e...
表示されているウェブサイトの所有者によって作成されました。パブリッシャーは実績が良好で違反歴はありません。詳細 Google Meet、Zoom、およびMS Teamsにて、超正確なChatGPTによる会議の要約と転写を体験してください。 ノートをとる必要もなく、何かを見落とすこともありません。タクティクスは会議を転記し、要点をまとめるサポートをします！ チームのスタンドアップから営業電話、マスタークラス、製品調査セッションまで、どんな場面でも見逃すことはありません。タクティクの強力なAIパワード会議転写ツールで貴重な洞察力をすべてキャプチャしましょう。 💡 🤖 ブレイクスルーのGPT-4で動作するタクティクは、超正確な会議の要約を提供し、すべての詳細を保持します。ChatGPTの会議要約をシームレスに統合し、ジェネレーティブAIがアクションアイテムや主要なポイントを自動検出することが
Google Geminiの活用方法(22) ChromeのサイドパネルでCopilotを使う Copilot sidebar for Chrome その2
前回はGoogle ChromeでMicrosoft EdgeのCopilotパネルそのものを実現する「Copilot sidebar for Chrome拡張機能」について取り上げた。UIとしてはかなり理想的なものだ。今回はこの拡張機能がどこまで使えるのかを取り上げる。 連載「Google Geminiの活用方法」のこれまでの回はこちらを参照。 Copilot sidebar for Chrome拡張機能 Google ChromeでMicrosoft EdgeのCopilotパネルのようなものを実現する拡張機能として、GeminiではなくMicrosoft EdgeのCopilotパネルそのものを実現するという「Copilot sidebar for Chrome」がある。 Copilot sidebar for Chrome - Chrome ウェブストア Copilot sideb
日本語が含まれるURLを、文字化けさせずにそのままコピーするChrome拡張機能です。 本拡張機能を導入した状態で、日本語が含まれるサイトを開きます。拡張機能ボタンをクリックするか、Alt＋Uを押すか、ページの右クリック→「Copy URL from the address bar」をクリックすると、日本語のままクリップボードにコピーします。 通常、日本語が含まれるURLをコピーすると、ブラウザが勝手にエンコード（文字変換）して、パーセントとアルファベットの文字列に置き換えてしまいます。 例えば、「ナポリタン寿司」という単語が含まれているURLの場合、コピーすると以下のようになります。意味は一緒なんですが、エンコードされた状態だと、かなり長くなってしまい、綺麗ではありません。 %E3%83%8A%E3%83%9D%E3%83%AA%E3%82%BF%E3%83%B3%E5%AF%BF%E5
ssl.gstatic.comとは何か
このドキュメントの内容は、以下の通りです。 はじめに gstatic.comへのアクセスがたくさんある 試してみる gstatic.comについて gstatic.comをwhoisで確認する はじめに パソコンやスマートフォンなどのウェブブラウザでホームページを閲覧するとき、ページが表示されるときに、コンテンツや画像がダウンロードされます。そのページには、いろいろなサイトからデータがダウンロードされていることがあります。サイトには、インターネット広告やアクセス解析のプログラムが掲載されていることもあります。 パソコンなどの通信を見ていると、普段、目にしないものが見つかることもあります。今回は、 gstatic.com についての話になります。 gstatic.comへのアクセスがたくさんある ウイルス対策ソフトのWebシールドを眺めていると、しょっちゅう、 ssl.gstatic.com
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome DevToolsを使いこなしてフロントエンド開発を加速させる
スタイルをカスタマイズ可能な新しい `<select>` 要素
autoなheightでもアニメーションができるようになる！calc-size() について
またしてもプライバシーより自社の利益を優先したGoogle――サードパーティークッキー廃止を撤回 | p2ptk[.]org
Chromium+GNOME+Waylandで日本語入力が可能に
アップデートでフォント変わった!? Chromeのフォント設定を確認、変更する方法
【Chrome】128アップデートでフォントが変わった・太字になる問題の詳細と対処（2024年版）
台風10号ネタに絡んでいた新種のインプレゾンビにも対応、「Clean-Spam-Link-Tweet」v1.9.7.3／「Twitter for Advertisers」インプレゾンビを非表示に、スパムリンクへの警告も
ChromeからFirefoxに乗り換えた理由とその方法 | ライフハッカー・ジャパン
AR/VRヘッドセット用Webブラウザー「Wolvic」の「Chromium」バージョンがv1.0に到達／「Firefox Reality」の後継プロジェクト。視線追跡ナビゲーションにも対応
「Google Chrome 129」が正式版に ～「macOS Catalina 10.15」のサポートは終了／ツールバーをサイドパネルでカスタマイズする機能などがロールアウト
「Google Chrome」に新たなセキュリティ対策機能が導入 ～Googleが解説／Webサイトに1回だけアクセス許可を与える機能などを導入
「Chrome 129」では「IndexedDB」が高速化 ～Googleが新しい最適化を導入へ／「Snappy」圧縮でディスク消費とパフォーマンスを改善
Chrome is Entrenching Third-Party Cookies For Some Sites In A Way That Will Predictably, Inevitably Mislead Users | Brave
【拡張機能】過去一の衝撃！控えめに言って神すぎるブラウザ拡張機能を見つけたので徹底解説します【Visi OS】
Tactiq.io - AI Meeting Transcripts for Google Meet, Zoom & Teams
nicopip / ニコニコ動画・ニコニコ生放送をPinPで再生する非公式Chrome拡張 - 鳥小屋ポータRu
Tactiq: ChatGPT 会議の概要 - Chrome ウェブストア
【Copy Unicode URLs】日本語のままURLをコピーする拡張機能 | ナポリタン寿司のPC日記