브라우저 활용 7

{개발자도구} Console 탭 유틸 함수

개발자도구에 있는 Console 탭에서 디버깅에 유용한 유틸 함수를 제공합니다. 오늘은 알고 있으면 언젠간 써먹을 Console 탭 유틸 함수를 알아보겠습니다. 목차 - clear(): 콘솔 로그 모두 제거하고 싶을 때 - copy(param): 복사하고 싶을 때 - $_: 이전 실행 결괏값 참조하고 싶을 때 - $(selector), $$(selector): DOM 참조하고 싶을 때 clear(): 콘솔 로그 모두 제거하고 싶을 때 clear() 함수는 현재 콘솔 패널에 표시되고 있는 로그들을 모두 제거합니다. 로그를 모두 제거하고 새로운 작업을 하고 싶을 때 유용합니다. clear() 실행 후에는 Console was cleared와 같은 문구가 표시됩니다. copy(param): 복사하고 싶을 때 ..

브라우저 활용 2024.01.29

[개발자도구] 네트워크 필터 의미 | js css fetch xhr ws

네트워크 필터에서는 리소스 종류에 따라 필터링을 할 수 있습니다. 이 포스트에서는 자주 사용되는 리소스 위주로 정리했습니다. Doc HTML 문서에 대한 리소스를 확인할 수 있습니다. SSR를 정상적으로 수행 중인지 확인할 때 용이합니다. JS JavaScript에 대한 리소스를 확인할 수 있습니다. Fetch/XHR JavaScript에서 실행된 비동기 요청 리소스를 확인할 수 있습니다. fetch() 함수, XMLHTTPRequest 객체 실행을 확인할 수 있습니다. CSS CSS에 대한 리소스를 확인할 수 있습니다. Font 폰트 파일에 대한 리소스를 확인할 수 있습니다. 웹 페이지 로드 후 폰트가 바뀌거나 로드 시간이 늦을 때 유용합니다. Img 이미지 리소스를 확인할 수 있습니다. 이미지 사이즈..

브라우저 활용 2024.01.17

[개발자도구] 네트워크 디버깅

개발자도구를 통해 페이지에서 발생하는 네트워크 디버깅을 위해서 녹화버튼을 실행한 뒤 새로고침합니다. 모든 네트워크 활동이 네트워크 로그에 기록됩니다. 네트워크 로그 네트워크 로그의 각 행은 리소스를 표시합니다. 기본적으로 시간순서로 나열됩니다. 특정 시점 확인 네트워크 로그에서 특정 시점을 선택해서 리소스를 폭포수 모델로 확인할 수 있습니다. 리소스 데이터 리소스를 선택하면 데이터를 확인할 수 있으며 항목별로 의미는 다음과 같습니다. Headers HTTP 요청/응답 헤더를 확인할 수 있습니다. Payload HTTP POST/PUT 메소드일 때 HTTP 요청 Body에 담아 보낼 데이터를 확인할 수 있습니다. Preview HTTP 응답 Body의 데이터를 정리해서 확인할 수 있습니다. Response..

브라우저 활용 2024.01.17

[웹 브라우저 활용] 웹 페이지 캡처 방법

웹 브라우저에서 웹 페이지 캡처 기능이 있다는 것을 알고 있으셨나요? 이 글에서는 Edge 브라우저를 기준으로 알아보겠습니다. Edge 브라우저는 Chrome 브라우저와 같은 플랫폼을 사용하기 때문에 Chrome 브라우저도 같은 기능을 제공합니다. 웹 페이지 캡처 기능 위치 웹 페이지 캡처 기능은 개발자 도구에서 확인할 수 있습니다. 우선 아래와 같이 개발자 도구를 실행하고 개발자 도구에서 실행 명령을 실행합니다. 실행 명령창에서 스크린샷을 검색하면 웹 페이지 캡처 기능을 볼 수 있습니다. [개발자용] 노드 스크린샷 캡처 [노드 스크린샷 캡처]는 웹 페이지의 HTML 코드를 선택해서 캡처하는 기능입니다. 노드를 선택해서 캡처하면 다음과 같이 다운로드됩니다. 스크린샷 캡처 [스크린샷 캡처]는 현재 보고 있..

브라우저 활용 2024.01.11

[Copilot | Microsoft Bing] GPT-4 무료로 사용하기

ChatGPT에서 유료로 사용 중인 웹 페이지 기반 글 요약, 이미지 생성 등을 Microsoft Bing에서는 무료로 제공 중인 것을 알고 있으셨나요? 이미지 생성을 예제로 사용하는 방법을 정리해봤습니다. Microsoft Bing 이란? Bing은 검색을 위한 AI 기반 어시스턴트로, 창의적인 콘텐츠를 생성하거나, 글쓰기를 개선하는 등 다양한 기능을 제공합니다. Microsoft Bing 사용 방법 PC에서 Bing을 사용하려면 Microsoft Edge 브라우저를 사용해야 합니다. 윈도우 컴퓨터라면 기본으로 설치되어 있습니다. Microsoft Edge 다운로드 Edge의 새로운 기능을 가장 먼저 미리 보고 싶으신가요? 참가자 채널은 최신 기능으로 지속적으로 업데이트되므로 지금 다운로드하여 참가자가..

브라우저 활용 2024.01.10

[Copilot | Microsoft Edge] 웹 페이지 요약 툴

일과 중에 피로가 쌓인 상태에서 자료를 찾는 데, 웹 페이지에 정보가 많을 경우 페이지 요약으로 쉽게 보고 싶을 때가 있습니다. Microsoft Edge 브라우저에서 Copilot 기능을 사용하면 웹 페이지 요약을 쉽게 할 수 있습니다. Microsoft Edge에 대한 내용은 아래 링크 참고 바랍니다. https://www.microsoft.com/ko-kr/edge/download 웹 페이지 요약 툴 사용 방법 Microsoft Edge 브라우저 실행 후 오른쪽 상단에 파란색 Copilot 아이콘을 클릭해 줍니다. 다음 Copilot 화면에서 페이지 요약 생성을 클릭해 줍니다. 페이지 요약이 완료되면 다음과 같이 표시됩니다. 페이지 요약 기능 이외도 다양한 기능이 있으니 일할 때 생산성을 높이기 좋..

브라우저 활용 2024.01.10

브라우저 캐시 삭제 간단 정리

브라우저 캐시는 웹 사이트의 접속 속도를 빠르게 하기 위한 기술입니다. 브라우저 캐시에는 웹 사이트의 이미지와 소스 코드를 저장하고 재사용해서 웹 사이트의 접속 속도를 빠르게 합니다. 하지만 오래된 이미지와 소스 코드 영향으로 최신 사항이 보이지 않을 때가 있습니다. 이 글에서는 브라우저 캐시 삭제 방법을 정리해 봤습니다. 검색 기록에서 삭제하기 브라우저 오른쪽 상단에 있는 더보기 메뉴를 클릭하고, [인터넷 사용 기록 삭제] 버튼을 클릭합니다. [캐시된 이미지 및 파일]을 선택하고 [인터넷 사용 기록 삭제] 버튼을 클릭하면 브라우저 캐시가 삭제됩니다. 만약에 브라우저 캐시가 삭제되지 않았다면 기간을 변경해서 해보시기 바랍니다. 개발자 도구에서 캐시 삭제하기 웹 사이트의 소스 코드에서 브라우저에 데이터를 ..

브라우저 활용 2024.01.09
728x90