유용한 구글 크롬(Google Chrome)의 기능

Chrome URLs

크롬 URL은 Google Chrome 브라우저에서 설정 페이지나 특정 기능으로 빠르게 접근할 수 있게 해주는 내부 주소입니다.

북마클릿 Bookmarklet

북마클릿은 자바스크립트 코드를 포함하고 있는 북마크로, 사용자가 클릭하면 해당 코드가 실행되어 특정 작업을 수행합니다. 북마클릿(Bookmarklet)이라는 단어는 북마크(Bookmark)와 애플릿(Applet)의 합성어입니다. 북마크의 편리함과 애플릿의 실행 기능을 결합한 형태를 잘 나타냅니다.

북마클릿은 1990년대 후반에 등장했으며, 특히 브라우저에서 반복적인 작업을 자동화하거나 웹 페이지를 개인화하기 위한 도구로 널리 사용되었습니다. 그 후로 웹 개발자들과 사용자들 사이에서 인기를 끌게 되었습니다.

유용한 북마클릿

// 현재 탭 복제
javascript:void(window.open(location));

// wayback - wayback machine에 현재 페이지 저장
javascript:void(window.open("https://web.archive.org/save/"+document.location.href));

// Decoded URL - 현재 페이지의 디코딩된 URL를 복사한다.
javascript:console.log(prompt('copy (Control+C) this link:', decodeURIComponent(window.location)));

// Webpage Stats - 페이지 통계
javascript:(function(){var el=document.createElement('script');el.type='text/javascript';el.src='https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js';el.onerror=function(){alert("Looks like the Content Security Policy directive is blocking the use of bookmarklets\n\nYou can copy and paste the content of:\n\n\"https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js\"\n\ninto your console instead\n\n(link is in console already)");console.log("https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js");};document.getElementsByTagName('body')[0].appendChild(el);})();

// PageSpeed Insights - 현재 페이지 분석
javascript:void(open('https://pagespeed.web.dev/analysis?url=' + encodeURIComponent(location.href)));

// EyeDropper - 색상의 HEX 코드를 찾을 수 있는 Eye Dropper를 실행
javascript:void(async()=>{try{prompt('Selected HEX color:',(await new EyeDropper().open()).sRGBHex);}catch(e){alert(e);}})();

// 3D Webpage - 현재 페이지를 3D로 보여준다.
javascript:(function(){var js=document.body.appendChild(document.createElement("script"));js.onerror=function(){alert("Error! The Script Could Not Be Loaded!")};js.src="https://rawgit.com/Krazete/bookmarklets/master/tri.js"})();

// 1000ms(1초) 후에 모든 이미지에 빨간 테두리 추가
javascript: (async () => {
  async function sleep() {
    return new Promise((r) => setTimeout(r, 1_000));
  }
  await sleep().then(() => {
    const images = document.querySelectorAll("img");
    images.forEach((img) => {
      img.style.border = "2px solid red";
    });
  });
})();

자바스크립트 스니펫

Run snippets of JavaScript

개발자 도구 DevTools

Performance 패널

브라우저에서 페이지 성능을 체크할 수 있습니다. 아래 스크린샷처럼 Core Web Vitals(CWV)도 함께 확인할 수 있습니다.

Performance Panel

Network 패널

아마 가장 많이 사용하는 패널이 아닌가 싶습니다.

Network Log

Network Log

Inspect network activity

Network Conditions

More network conditions

network conditions

HTML 문서 생명주기

네트워크 성능을 체크할 때 HTML 문서 생명주기 를 알아두면 도움이 됩니다.

Network 패널에서 HAR 가져오기

Save all network requests to a HAR file

Sources 패널

로컬 재정의 (Local Overrides)

Local Overrides

Override 파일을 저장할 폴더 지정

Local Overrides now works with some styles defined in HTML

Console

Warning:
Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself.
This could allow attackers to steal your identity or take control of your computer.
Please type ‘allow pasting’ below and hit Enter to allow pasting.

웹 브라우저에 따라 입력하는 것이 다릅니다.

// Google Chrome
allow pasting

// Microsoft Edge
console.profile()

참조