お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

生のHTTPメッセージを見たい時に使える方法。devtoolsではフォーマットされたログしか見れないが、生のテキストを見たい時に使える。具体的には以下の画像のような奴だ。

image-1706238902445.png

よく忘れるのでメモとして残しておく

確認環境

Env Ver
Google Chrome 120.0.6099.225
Microsoft Edge 120.0.2210.144

やり方

chrome://net-internals/にアクセスするとログ収集ができるので、ログを集めたらイベントビューワで見ればよい。なおイベントビューワは外部サイトなので注意。

以前はブラウザ内で完結していて、リアルタイムに見れたはずだが、何故かできなくなっていた。

Edgeの場合はedge://net-internals/でもアクセスできるが、特にこだわりがなければ汎用性の高いchrome://net-internals/でよいと思う。

個人的に便利だと思うChrome拡張を書き出しておく。

Authenticator
よくあるQRコード式の2FAをするための拡張だ。TOTPであればなんでも使えると思う。たぶん
GitHubのリポジトリを見る感じMSの社員のコントリビュートが見られるほか、慶応義塾をはじめ様々な大手機関での採用が見られるので、不審なものではないと思われる。
態々モバイル端末を取り出して手入力せずに済むので非常に便利だが、同一端末で認証が可能になってしまう関係上、2FAの信頼性は揺らぐことになる。

Debug CSS
CSSのデバッグをするときに有用な拡張だ。以下の画像のように要素のサイズがどうなっているかなどを見れるので、要素が突き抜けている状態や、サイズが0になっているなどを確認するのに便利。

Debug CSSの画面

Resource Override
名前の通りリソースの上書きができる拡張機能だ。例えばサイト上にあるCSSやJSなどをすり替えることができる。
これはTamperMonkeyなどでは手を入れずらいようなことをする場合に便利だろう。

Resource Overrideの画面

uBlock Origin
AdBlockの時代はもう終わった、そう思わさせる拡張機能だ。ほとんど大抵の広告をブロックできるので非常に便利である。ついでに不正なリダイレクトの確認機能もあった気がする。

Stylus
ユーザーCSSとして有名な拡張機能だ。任意のサイトのCSSを書き換えるときに重宝するだろう。例えばTwitterのセンシティブ表示外しといった用途は有名だと思うし、他にも様々なサイトで表示を自分好みにしたいときに便利なものだ。

GoFullPage - Full Page Screen Capture
ページのスクロールキャプチャを取るのに便利なやつだ。以前はChrome単体でもdevtoolsから出来たのだが確か五年ほど前にできなくなったので、こういったものを使うしかなくなった。

crxMouse Chrome™ Gestures
Chrome拡張でもっとも有名なマスジェスチャーの一つだろう。これがあれば自分の好きなマウスジェスチャを設定できるので非常に便利だろう。但し閉じたタブを開くなど一部動かないアクションがある。
因みに一般的なアクションパターンであればEdgeが標準でサポートしているので、そちらで事足りる場合はそれでもいいと思う。

参考までに以下はEdgeのジェスチャ設定画面だが、標準である程度一般的なパターンが登録されており、カスタムパターンを作りたい場合や、ここにないアクションを登録したい場合があると物足りない。

Edgeのジェスチャ登録画面

二次元画像詳細検索
この二次元画像の作者や出典は誰?と思って調べるときに有用なものだ。基本的に転載されたものやコラージュされたものを調べるために特化している。

Image Search Options
二次元画像詳細検索と用途がほぼ同じ拡張機能だが、海外で作成されたものでxbooru系やYandexなどへの拡張検索にも対応している。もちろん、二次元画像詳細検索へも問い合わせできる便利なものだ。二次元画像詳細検索と合わせて利用すると便利だろう。

EdgeとChromeは同じだったがNode.jsでは異なる挙動をしていたのでそのメモ

確認環境

Env ver
Microsoft Edge 120.0.2210.9
Google Chrome 120.0.6099.130
Node.js 20.0.0

環境別の確認結果

Edge

DevToolsで確認

const err = new Error('test');
Object.getPrototypeOf(err);

// {name: 'Error', message: '', constructor: ƒ, toString: ƒ}

Google Chrome

DevToolsで確認

const err = new Error('test');
Object.getPrototypeOf(err);

// {name: 'Error', message: '', constructor: ƒ, toString: ƒ}

Node.js

node -iで確認

const err = new Error('test');
Object.getPrototypeOf(err);

// {}
投稿日:
OS::Windowsソフトウェア::ブラウザ::Chrome

このオプションはGoogle Chrome 112.0.5615.49にはありませんが、116.0.5845.188, 117.0.5938.88, 120.0.6099.225では表示されていました

Windows 11でGoogle Chromeを利用しているケースで正確な位置情報が取得できない場合の対処方法の紹介です。KING OF TIMEとかUberEatsの位置情報取得が上手く行かないときに使えると思います。

確認環境

Env Ver
Windows 11 22621.1105
Google Chrome 109.0.5414.120

手順

  1. Windowsの設定を開く
  2. プライバシーとセキュリティ>位置情報を開く
  3. デスクトップアプリに位置情報へのアクセスを許可するをON
    1. デスクトップアプリに位置情報へのアクセスを許可するをONにする
  4. 以下のアドレスを開き設定をEnabledに変更
    1. chrome://flags/#enable-winrt-geolocation-implementation
    2. 設定をEnabledに変更
  5. Google Mapsなど適当な位置利用サイトを開き、位置情報取得操作を行う
  6. 位置情報の利用を許可
  7. Windows側の位置情報が反映されればOK

関連記事

具体的にはref('SomeReference').once('value')の結果を取得する

確認環境

Env Ver
Chrome 91.0.4472.77
Firebase SDK 8.6.2

サンプルコード

top level awaitが使える

// apps[]から使いたいのを取る
const dbInstance = firebase.apps[0]
// DB参照を取る
const dbRef = firebase.database(dbInstance)
// 読み取る場合、書き込みは.set()とかする
(await dbRef.ref('/foo/bar').once('value')).val()