Chrome113でHTTPヘッダを上書きしていろんな状態をお試しできる - hogashi.*
Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。 GitHub から example.com を fetch してみる GitHub の CSP ヘッダを上書き example.com の CORS のヘッダを上書き 途中で指定したフォルダの中身は何？ 上書きをやめるには？ 感想 GitHub から example.com を fetch してみる 試しに、 CSP で外部への通信がそれなりに制限されている GitHub から、 example.com への fetch を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつ
Chrome Developer Toolsでパフォーマンスを最適化 | PerfData
パフォーマンスチューニングの基礎:プロファイリング 2023年4月3日 著者: 竹洞 陽一郎 はじめに Webパフォーマンスチューニングは、WebアプリケーションやWebサイトのパフォーマンスを向上させるために実施される最適化手法の一連です。 効果的なパフォーマンスチューニングを実現するには、正確なプロファイリング情報が欠かせません。 フロントエンドの品質管理では、プロファイリングを利用して時間消費別のパレート図を作成し、最も時間を消費している部分から改善を開始します。 パフォーマンスチューニングに詳しくない方向けに、Lighthouseが利用できます。 ただし、実務におけるパフォーマンスチューニングでは、Lighthouseだけではボトルネックの特定が難しいことがあります。 これからWebパフォーマンスチューニングを始める方や、現在Webパフォーマンスチューニングに取り組んでいる方には、
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
Mizu - API Traffic viewer for Kubernetes
A simple-yet-powerful API traffic viewer for Kubernetes to help youtroubleshoot and debug your APIs. Think of TCPDump and Wireshark reinvented for Kuberneteswith multi-protocol and TLS support.
2021年のエンジニア新人研修の講義資料を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。開発本部 オンボーディングチームの酒井（@sakay_y）です。社内のオンボーディングコンテンツを、どんどん社外へ公開することを夢見ています。 2021年もエンジニア新人研修を行いましたので、軽い紹介と、講義資料および一部講義動画（New!）を公開いたします。 2021年のエンジニア研修について 講義資料公開 Webアプリケーション基礎 HTTP/DNS ソフトウェアライセンス ソフトウェアテスト テスト自動化 アクセシビリティ Docker Chrome Developer Toolsの使い方 サイボウズのアジャイル・クオリティ デザインの役割と関わりかた データベース CI/CD セキュリティ モブに早く慣れたい人のためのガイド ITコミュニティ文化と情報発信に共通する成長と貢献の要素 正規表現 Kubernetesを使った開発入門 モニタリング入門 gRPC入門 日本語話
misc finder - 自分の情報ソースから検索するGoogle Chrome機能拡張
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 未知の情報を探す時にはGoogleが役立ちます。キーワードを入れれば、欲しい情報が見つかるはずです。しかし、既知の情報を探す場合、とても面倒だったりします。Google検索を使っても、あったはずのページになかなかたどり着けなかった経験は誰もがあるはずです。 そこで使ってみたいのがmisc finderです。自分の見知っている情報源から検索してくれるGoogle Chrome機能拡張です。 misc finderの使い方 検索結果です。Google Chromeのツールバーから素早く検索できます。 misc finderはScrapbox、はてなブックマーク、ブラウザの履歴、そしてローカルのブックマークから検索してくれます。Scrapbox、はてなブックマークともにログインしておく必
技術系の情報をググるときにStack Overflowの機械翻訳サイトを回避する技術 - ムニエルブログ
近年、技術系の情報をググると検索結果にStack Overflowの機械翻訳サイトが表示されることが多くなってきました。1 ひどいときには、オリジナルのページよりも上位に表示されていることさえあります。 Googleの検索結果の精度は年々悪化の一途をたどっているように思いますが、そういった状況の中で僕が取っている自衛手段をご紹介します。 uBlacklistで検索結果から除外 uBlacklistは、正規表現やマッチパターンで指定した任意のウェブサイトをGoogleの検索結果から除外するためのChrome拡張です。 自分でフィルタを書くこともできますが、ありがたいことにStack Overflowの機械翻訳サイトの除外用フィルタを公開している人がいるので、そちらを購読しています。 2020年7月31日現在のフィルタのURLは、以下の通りです。 https://raw.githubuserc
普段やってる情報収集や学習について(フロントエンド寄り)
どうも。 普段フロントエンド周りの開発をやっている者です🐶 今回は普段自分がやっている情報収集と学習で使ってるサイトや手法を紹介します。 過去にも何度かこの類の話をしているのですが、2020年版という感じです。 誰かの参考になればいいなと思います。 情報収集 まずは情報収集についてです。 自分の場合は、毎日見るものと週に1度見るものがあります。 daily.dev 普段はこのdaily.devのブラウザ拡張機能を入れて、Chromeのトップ画面で情報を見ています。 新しいタブを開くたびに表示されるので、いつも目に入るのがいいところです。 2021/05/26 追記 Chrome拡張だけではなく、Web アプリケーションもリリースされました🎉 PWAにも対応しているので、デスクトップやモバイルでインストールも可能です！ daily.devは簡単に説明するとさまざまなサイトのRSSリーダー
Chromeで(いわゆる)スーパーリロードとキャッシュクリアを少しでも楽に行いたい | DevelopersIO
やりたいこと Web開発において、コンテンツをサーバ側にアップロードしてリロードしたにも関わらず、ブラウザに反映されないことがあります。 確実に反映させるために、以下の手順を実施していました。 ブラウザ(Chrome)のローカルキャッシュをクリア スーパーリロードを実施して、キャッシュ設定状態によらず、サーバからコンテンツをダウンロード Ctrl(macOSの場合 Command) + Shift + R この手順が少しでも楽にならないかと思い、調べてみました。 環境 macOS Catalina 10.15.6 Chrome 84.0.4147.125 Chrome デベロッパーツールを使う場合 上記のページの通りなのですが、Chrome デベロッパーツールを開いている時限定で、 ブラウザの再読み込みボタン上で右クリックする(もしくは左クリックし続ける)と現れるメニューから キャッシュの
開発体験を変える! 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がサードパーティーCookie廃止に向けて開発者向けツールのテストを開始
Google Chromeでは広告配信のためにサードパーティCookieを利用していますが、Googleはユーザーのプライバシーを侵害するサードパーティーCookieを廃止すべく、その替わりとなる広告配信の仕組みについてテストを開始しました。 Updates on our work to improve user privacy in digital advertising https://blog.google/products/ads-commerce/improving-user-privacy-in-digital-advertising Google starts testing its replacement for third-party cookies | Engadget https://www.engadget.com/google-tests-ad-trust-tok
Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる - nwtgck / Ryo Ota
Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
Webサイトで利用されているフォント情報を表示してくれるブラウザ機能拡張「Fonts Ninja」のChrome版が、より詳しいフォント情報の表示やブックマーク機能に対応。
Webサイトで利用されているフォントの情報を表示してくれるブラウザ機能拡張「Fonts Ninja」のChrome版がアップデートされ、より詳しいフォント情報の表示や無料のブックマーク機能を提供しています。詳細は以下から。 Fonts Ninja (旧Fontface Ninja)はフランス・パリのデザイナーAxel Corjonさんが2015年に開発したブラウザ機能拡張で、Webサイトで利用されているフォントの情報を一覧にして表示してくれる機能がありますが、このFonts NinjaのGoogle Chrome版がv6.0へアップデートされています。 ⭐️ We updated a lot of stuff, but the main new feature is the ability to bookmark fonts you discovered on websites. You
Chrome Platform Status
Try out our new features page Filter By Features:
YouTubeでの英語学習がはかどるGoogle Chrome拡張機能 | ライフハッカー・ジャパン
ほかにも右枠に英語字幕が表示されますので、動画中の字幕が一瞬で消えてしまったとしても、前後のセンテンス含めて追えますよ。 単語の意味の確認はマウスカーソルをあてるだけScreenshot: 山田洋路 via LLY知らない単語が出てきたときには、英語字幕にマウスオーバーすると辞書がポップアップ。動画中/右枠どちらの字幕からも単語辞書は確認できて、マウスオーバーの際に一時停止するよう設定できます。 同じように、いったん止めて意味を確認したいときや、今のフレーズをもう一度再生して聞き直したいときには、スペースキーや方向キーを押すだけで操作可能です。 目的に合わせて字幕のオン/オフを切り替えScreenshot: 山田洋路 via LLY英語字幕を見つつ、わからないところが出てきたら日本語字幕に頼る…というような使い方が想定されますが、つい日本語字幕を見てしまうのなら設定から非表示に。 リスニン
電子情報学特論：Chromiumのアーキテクチャを解き明かす
電子情報学特論： Chromium のアーキテクチャを解き明かす 〜 EEIC の授業が生きるプロダクトの世界〜 Kentaro Hara 2020 April (๑>ᴗ<๑) * * * *
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サイトがユーザー本人の意図した動作であることを検証していないため
Chromeのloading属性は、指定しなくてもデフォルトで"lazy"の挙動となりうる ～loading属性の落とし穴から学ぶ、機能拡張と初期値・デフォルト挙動の話～ - Qiita
Chromeのloading属性は、指定しなくてもデフォルトで"lazy"の挙動となりうる ～loading属性の落とし穴から学ぶ、機能拡張と初期値・デフォルト挙動の話～CSSJavaScriptChrome 【事前知識】loading属性について Chromeのimg・iframe要素には、loading属性というものがある。 こいつをHTMLでloading="lazy"のように指定すると、遅延読み込みする（画像等がスクロール等で画面内に入ってきた時に初めて読み込み始める）。 こうすることで、時間がかかる無駄な読み込みが抑えられ、ページ表示速度が速くなったり、通信量を減らせたりする。 値には次の3種類があり、"lazy"が遅延読み込みオン、"eager"は遅延読み込みオフ（遅延せず愚直にすぐ読み込み）、"auto"はlazyかeagerかをChromeがネットワーク速度などを考えて自動
海外で７年働いて、今でもやっぱりメチャ使っている英語の補助ツール３選｜__shinji__
アプリの方はまだ日本語版のみですが少しずつ改善を続けています。このnoteの中でオススメの英語ツールについて記事を書くと宣言していたものの、なかなか時間がとれず遅くなってしまいすみません。数年前の記事の書き直しではありますが、誤っていた部分を修正し、情報を最新版にして改めて書いてみます。 というわけで、今回は英語の補助ツールの紹介です。知っている人からすれば定番中の定番ではありますが、だからこそ英語を勉強中の方でも設定してしまえばきっと長い間使うことになると思うので、まだ設定していない方はぜひこの機会にやってみてください。パソコンでのGoogle Chromeを使った設定になります。 爆速ポップアップ辞書 英文のドキュメントを読んでいるときに意味を知らない単語が出た場合、いちいち翻訳サイトに飛んだり、辞書を開いたりするのは面倒ですよね。そんなときに使えるのがポップアップ辞書になります。ポッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
社内でフロントエンドのパフォーマンスチューニングコンテストを開催した
