デバッグに便利！ブラウザの HTTP 通信ログをアーカイブして共有・確認できる HTTP Archive File / Viewer の紹介
ブラウザと API サーバーの繋ぎこみや画面遷移を伴う他サービスとの連携をする時、予期せぬエラーが起きたり想定外の挙動をしてデバッグに苦労したという経験をお持ちの方は多いのではないでしょうか。 多くの Web アプリ開発で、API サーバーとの通信がどのように行われているかを把握することは不可欠です。上手く行かない場合、どのようなリクエストが送られたか、どのようなレスポンスが返されたかを確認するために、ブラウザのデベロッパーツール（開発者ツール）を利用したり、Fiddler などのツールを利用してデバックすることが多いと思います。 この記事では、こういった時に役立つ手法として、ブラウザのデベロッパーツールで HTTP 通信をキャプチャしてその内容をアーカイブとして保存する方法と、保存したアーカイブファイル（HARファイル）を閲覧するツールについて紹介します。 HAR ファイルとは？HTTP
ブラウザレンダリングの仕組み
Webの用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステップにな
Webページがブラウザに表示されるまでに何が起こるのか？
## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 上記で「127.0.0.1 localhost」とあるように、[IPアドレス] [ホスト名]というフォーマットで書かれます。 HOSTS.TXTが使われていた当時 ( 1970年代 ) では、わずか数百台のホストしかなかったので、ネット上の全てのホスト情報の記載が可能でした。 しかし、インターネットが普及していくにつれてHOSTS.TXTは肥大化していき、1983年には、ホスト数はおよそ数万台になりました。もはやHOSTS.TXTによる名前解決は不可能となったので、現在のようなDNS
WebSocketを使ってWebブラウザ間P2P通信をしてみた - いろいろな何か
はじめに ブラウザ間でP2P通信が実現できれば、ブラウザ上で動作するP2Pアプリが作れて面白そうだなーと思ったのでWebSocketを使って実現してみました。仕組みについては以下で説明していきますが、私が実現した方法は限定的で実用性が低く色々と足りない部分もあるので、軽い気持ちで読んで頂けるとありがたいですw 仕組みの概要 なぜWebSocketを使うのか 従来、Webサーバとクライアント(Webブラウザ)間で非同期に通信するにはXHR(XMLHttpRequest)を用いてきました。基本的にこのXHRは以下の図のように同一ドメインとしか通信できないという制約がありました。*1 しかし、WebSocketのthe Origin-based security modelでは異なるドメインとも通信することが可能になります。WebSocketプロトコルでは、サーバとクライアント間で接続を確立する
仕組みから理解するブラウザキャッシュ
Webページの表示速度を改善する手段の一つに、ブラウザキャッシュの利用があります。 単にブラウザキャッシュを利用するだけであればhttpd.confまたは.htaccessに記述を加えるだけでいいのですが、ブラウザキャッシュの仕組みをちゃんと理解した上で使いたかったので色々と調べてみました。 今回の記事では、調べた内容を紹介します。 Last-ModifiedヘッダーとETagヘッダー これらのヘッダーでは、ブラウザにキャッシュされたファイルとWebサーバーのファイルとが同じかどうかをブラウザが判断する方法を指定します。ファイルが同一であれば、ブラウザキャッシュが利用され、ファイルの転送量が節約されます。 ブラウザは、前回のアクセスでLast-ModifiedヘッダーまたはETagヘッダーを受け取った場合、条件付きGETリクエストをWebサーバーに送ります。 Last-Modifiedヘッ
edit#slide=id.g25ae9c179b_0_144
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
How Blink works
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか - Qiita
9月15日(土) DNSについて追記しました。バックエンド？今はクラウドがきっと上手くやってくれるので深く考える必要は無いんですよ（知らないので書けません😔） 問題のツイート 面接の質問で「ブラウザを立ち上げてページが表示されるまでの仕組みを全て知ってる限り説明してください」ってのをやると結構Web系の知識どれだけあるか分かると思ってる — 🍛🍺 (@tan_go238) September 10, 2018 解釈 今回は「ChromeのURL欄に入力してからページが表示されるまで」をやります。ブラウザの起動云々はWeb系の話じゃないと信じてます。 1. HTTPリクエストが飛ぶ **HTTP2のヘッダ圧縮技術**に全て書いてありました。 (追記)下のリクエストヘッダはテキストで書かれていますが、実際にはこれをバイナリにしたものが飛んでいるとのことです。segfoさんありがとうござい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
