'Programming/Browser' 카테고리의 글 목록

Programming/Browser

Http/3은 UDP? 2020.07.08
크롬 디버깅하기 2013.05.08

PREV 1 NEXT

Http/3은 UDP?

2020. 7. 8. 17:38

https://blog.cloudflare.com/http3-the-past-present-and-future/

HTTP/3: the past, the present, and the future

We are now happy to announce that QUIC and HTTP/3 support is available on the Cloudflare edge network. We’re excited to be joined in this announcement by Google Chrome and Mozilla Firefox, two of the leading browser vendors and partners in our effort to

blog.cloudflare.com

이제 TCP가 아닌 UDP로.... 벌써 크롬은 카나리 빌드도 사용 가능하다고...

이 내용을 잘 정리한 포스트 udp설명도 곁들여 있다.

https://evan-moon.github.io/2019/10/08/what-is-http3/

HTTP/3는 왜 UDP를 선택한 것일까?

는 의 세 번째 메이저 버전으로, 기존의 HTTP/1, HTTP/2와는 다르게 UDP 기반의 프로토콜인 을 사용하여 통신하는 프로토콜이다. HTTP/3와 기존 HTTP 들과 가장 큰 차이점이라면 TCP가 아닌 UDP 기반의 통��

evan-moon.github.io

저작자표시

'Programming > Browser' 카테고리의 다른 글

크롬 디버깅하기 (0)	2013.05.08

크롬 디버깅하기

2013. 5. 8. 09:17

http://okjungsoo.tistory.com/entry/%ED%81%AC%EB%A1%AC-%EB%94%94%EB%B2%84%EA%B9%85%ED%95%98%EA%B8%B0

구글 크롬에도 디버깅하기 위한 여러 도구들이 포함되어 있습니다. 이 도구들은 "Control the current page > Developer"에 들어가면 볼 수 있습니다.

1. View source
Developer 항목에서 가장 먼저 제공되는 부분은 html 소스코드를 보여주는 항목인데요. 현재 보고 있는 페이지에서 View source를 클릭하거나 마우스 오른쪽 버튼을 눌렀을 때 나오는 컨텍스트 메뉴에서 "View page source"를 클릭해도 됩니다.

html 페이지를 라인별로 표기해주며 script, link, a태그의 href 속성 등 외부 링크를 가지는 속성들은 클릭시 해당하는 페이지로 이동할 수 있습니다. view-source 프로토콜에서 다른 주소를 입력하여 해당 페이지의 소스코드를 볼 수도 있습니다.
(Firefox의 WebDeveloper 플러그인의 View Generated Source와 같은 기능은 없습니다.)

2. Debug JavaScript
크롬에서 자바스크립트 디버깅은 command 명령어로 실행됩니다. 가장 기본적으로 제공되는 help 명령어를 입력하고 엔터키를 치면 입력가능한 명령어들을 모두 보여줍니다. 사용 가능한 명령어들은 다음과 같습니다.

break [location] <condition> : break point를 설정합니다.

break functionName 을 입력하거나 break script:functionName 을 입력하여 break point를 설정할 수 있습니다.
location의 위치에는 <function> 이나 <script:function>, <script:line>, <script:line:pos>가 올 수 있습니다.
location을 보면 line 설정이 가능한 것으로 나오지만 정확한 사용방법은 잘 모르겠네요;;

break_info [breakpoint #]: break 명령어를 사용해서 설정된 break point들을 보여줍니다. break_info만 입력하면 현재 설정된 모든 break point들을 보여주며 break_info 1과 같이 특정 break_point의 id를 함께 입력하면 해당하는 break point만 보여줍니다.
clear [breakpoint #]: break point를 제거할 때 사용합니다. break point의 id를 함께 넣어줘야 합니다.
help [command]: 도움말을 출력합니다. help break를 입력하면 break 명령어의 상세한 내용을 출력해 줍니다. 디버깅 실행 도중에 help를 누르면 현재 상태에서 사용가능한 명령어들을 보여줍니다. (args, backtrace, continue, frame, locals, next, source, step, stepout 등의 명령어를 추가로 볼 수 있습니다.)
print <expression>: 입력된 expression을 출력해줍니다.
scripts: 페이지에 추가되어 있는 모든 스크립트들의 위치를 보여줍니다. (line의 위치는 index가 0부터 시작하는 것 같습니다.)

아직은 사용하기엔 미흡한 것 같지만, 여기에 ui가 추가된다고 상상해보면 매우 기대되네요. ^^

3. JavaScript console
JavaScript console은 "Page > Developer > JavaScript console"을 클릭하여서 창을 띄울 수도 있지만, 마우스 오른쪽 버튼을 누르면 나오는 컨텍스트 메뉴로 띄울 수도 있습니다.

컨텍스트 메뉴로 JavaScript console 창을 띄우는 방법이 DOM inspector와 동일한 역할을 하고 있습니다. 창이 뜰 때, 가장 가까이에 있는 DOM 요소를 선택해서 보여주며 style, metrics, properties 세부 항목들도 함께 보여줍니다. (Resource interpreted as script but transferred with MIME type text/html.이라는 에러메시지와 함께 inspect되지 않는 경우도 있네요.)