# chrome

27개의 포스트

TIL No.8 [Chrome]개발자 도구 Network 패널의 기능

크롬 개발자도구란? Web 개발에 도움이 되는 도구로서 'Element', 'console', 'Sources', 'Network', , 'Performance', 'Memory', 'Application', 'Security', 'Lighthouse' 패널

약 11시간 전
·
0개의 댓글

Ubuntu 18.04에 Chrome 설치

크롬 웹 브라우저 패키지를 설치하기 위해 필요한 인증키 등록 wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -크롬 웹 브라우저 패키지를 다운로드 받을 P

2일 전
·
0개의 댓글
post-thumbnail

Chrome 개발자 도구 설명서 (NHN FORWARD 2020)

**본 내용은 [NHN FORWARD 2020] 천천히 읽어 보는 Chrome 개발자 도구 설명서 를 시청 후 기록한 내용입니다. ** Chrome 개발자 도구의 구성 1) 탭 개발자 도구에서 사용할 수 있는 주요 기능 탭들(ex) 설정) 2) Main 패널 주요

2020년 12월 19일
·
0개의 댓글

[chrome] Dev Tool

원문https://developers.google.com/web/tools/chrome-devtools/ 개발자 도구 활성화요소 선택장치 변경요소 (Elements)스타일 (Styles)스타일 계산 결과 (Computed)콘솔 (Console)소스 (Sourc

2020년 12월 18일
·
0개의 댓글

크롬에서 주소창 입력 시 https로 자동 리디렉션 되는 문제 해결방법

http://localhost:3000 등 http 주소를 입력하면 아래와 같이 에러가 발생하고 주소창에는 https://localhost:3000 처럼 프로토콜이 https로 자동으로 바뀌는 경우가 종종 발생하곤 한다.

2020년 12월 9일
·
0개의 댓글
post-thumbnail

mobile환경 테스트(feat. Android)

chrome://inspect/#devices을 이용해서 모바일 브라우저 콘솔창을 보자!

2020년 12월 4일
·
0개의 댓글

[신입4] 캐시 삭제와 트래픽 초과

전에 다니던 회사에서도 운영하는 사이트가 있었고 내가 나름 사이트 관리자였기 때문에 트래픽 용량을 신경 써야 했다. 실제로 트래픽 용량이 초과하여 시키는 대로 초기화를 시키기도 했다. 하지만 트래픽이 뭔지 설명을 봐도 이해할 수 없는 지식수준이었기 때문에 트래픽 관련

2020년 12월 4일
·
0개의 댓글
post-thumbnail

크롬 단축키

출처: https://support.google.com/chrome/answer/157179?hl=ko

2020년 12월 1일
·
0개의 댓글
post-thumbnail

Spring Security Redirect Location이 Mixed Content로 차단되는 경우

Spring Security Redirect Location으로 HTTP를 내려받았을 때, Mixed Content(Https에서 Http를 호출하는 경우) 이슈가 발생한 경우 처리하는 방법

2020년 11월 24일
·
0개의 댓글
post-thumbnail

개발자 도구와 Web Storage

크롬 개발자 도구에 대해 정리했다. 추가적으로 웹 스토리지에 대해서도 정리하였다.

2020년 11월 23일
·
0개의 댓글
post-thumbnail

[WECODE] DevTools(개발자도구)

각 브라우저에서 제공하는 기능. 개발자들이 페이지의 여러요소를 확인하거나 디버깅할때 자주사용하는 툴이다.여러 기능들이있지만 대표적으로 많이 쓰게되는 4가지를 알아보겠다페이지와 스타일 검사 및 편집, 스타일수정을 실시간으로 테스트 해볼 수 있게 도와주는 패널이다.실제로

2020년 11월 21일
·
0개의 댓글
post-thumbnail

Wecode | 5일차 TIL [개발자도구]

🖍 Chrome DevTools를 기준으로 작성된 글입니다.

2020년 11월 20일
·
0개의 댓글

크롬 개발자모드에서 마우스 좌표 찾기

개발자 모드에 아래 코드 입력원하는 위치에 마우스 커서를 두고 아래 코드 입력

2020년 9월 26일
·
0개의 댓글

퍼펫티어에서 $(), $$()

크롬개발자 모드나 퍼펫티어에서 $()나 $$()를 사용할 수 있다.$('div') = document.querySelector('div');해당 엘레먼트들이 여러개인경우엔 제일 첫번째꺼 선택$$('div') = document.querySelectorALL('div')

2020년 9월 17일
·
0개의 댓글
post-thumbnail

TIL : Chrome 개발자 도구(DevTools)

오늘은 프론트엔드 개발자라면 필연적으로 친해져야 한다는 개발자 도구(DevTools)에 대해 공부했다.그전까지 이름은 몰랐지만, html과 css를 공부할 때 이미 몇 번 확인해본 적 있는 툴이었다. 개발자 도구는 맥북 기준으로 크롬에서 command + option

2020년 9월 17일
·
0개의 댓글
post-thumbnail

맥에서 크롬이 열리지 않는 현상 해결 방법

맥에서 크롬을 설치하고 실행해도 아무런 반응이 없이 자동으로 크롬이 종료되는 현상을 발견했습니다. 크롬을 지우고 다시 깔아봐도 똑같은 현상만 반복...크롬을 설치한 상태에서 진행합니다.런치패드 > 기타 > 터미널터미널에 다음 명령어를 입력합니다.터미널에 다음 명령어를

2020년 9월 3일
·
0개의 댓글
post-thumbnail

크롬 탭 관리 방법 - 탭 그룹

무수히 많은 크롬 탭 때문에 불편함을 느끼셨던 분들을 위해 크롬 83부터 적용 된 탭 그룹 설정 방법을 소개합니다.

2020년 8월 28일
·
0개의 댓글
post-thumbnail

💌크롬에서 게시글 암복호화하기

Confluence 를 사용하던 중에 민감 정보(패스워드, 서버 정보 등)를 게시하는데 불편한 점이 있었다. 유료 플러그인을 사용하면 해결 될 문제지만 사용량이 적은 상태에서 유료 플러그인을 쓰기에는 부담되는 건 사실이다. 그렇다고 별도로 관리하려니 생각할 게 많아서

2020년 8월 26일
·
0개의 댓글
post-thumbnail

TIL. 크롬 개발자 도구 (element, network, console, application)

Elements html 코드를 분석하고 수정할 수 있는 도구 패널이다. Dom과 css를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있다.

2020년 8월 21일
·
0개의 댓글
post-thumbnail

Github 활용도를 높여 주는 크롬 확장도구 Octotree

깃허브 활용도를 높여주는 크롬에서 제공하는 확장 도구를 알아보자.깃허브 하나의 저장소에는 많은 폴더와 파일이 존재 한다.폴더와 파일을 찾기위해 클릭하고 또 클릭하고 ... 원하는 내용을 찾아보기 쉽지 않다.octotree는 이러한 문제를 해결하도록 도움을 준다.크롬 확

2020년 7월 3일
·
0개의 댓글