<div id="readability-page-1" class="page"><div><p>
                    👾 웹 개발자가 알면 유용한 구글 크롬(Google Chrome)의 기능
                    
                    </p><p>
                        개발 편의성을 높일 수 있는 기능을 소개합니다.
                    </p>
                    
                    
                </div><div v-pre="">
                
                    <ul>
<li><a href="#chrome-urls">Chrome URLs</a></li>
<li><a href="#%EB%B6%81%EB%A7%88%ED%81%B4%EB%A6%BF-bookmarklet">북마클릿 Bookmarklet</a>
<ul>
<li><a href="#%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%EB%8B%88%ED%8E%AB">자바스크립트 스니펫</a></li>
</ul>
</li>
<li><a href="#%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC-devtools">개발자 도구 DevTools</a>
<ul>
<li><a href="#chrome-62">Chrome 62</a></li>
<li><a href="#chrome-65">Chrome 65</a></li>
<li><a href="#chrome-66">Chrome 66</a></li>
<li><a href="#chrome-126">Chrome 126</a></li>
</ul>
</li>
<li><a href="#%EC%B0%B8%EC%A1%B0">참조</a></li>
</ul>
<h2 id="chrome-urls">Chrome URLs</h2>
<p>크롬 URL은 Google Chrome 브라우저에서 설정 페이지나 특정 기능으로 빠르게 접근할 수 있게 해주는 내부 주소다.</p>
<ul>
<li><code>chrome://about/</code>
<ul>
<li>크롬 URL 목록</li>
</ul>
</li>
<li><code>chrome://net-internals/#hsts</code>
<ul>
<li>HSTS 조회 및 비활성화</li>
</ul>
</li>
<li><code>chrome://inspect#devices</code>
<ul>
<li>USB로 모바일 디바이스를 연결해서 개발자 도구(DevTools)로 모바일 크롬 앱을 확인할 수 있다.</li>
</ul>
</li>
</ul>
<h2 id="북마클릿-bookmarklet">북마클릿 Bookmarklet</h2>
<p><code>북마클릿(Bookmarklet)</code>이라는 단어는 <code>북마크(Bookmark)</code>와 <code>애플릿(Applet)</code>의 합성어다.
이 단어는 다음과 같은 이유로 만들어졌다:</p>
<ol>
<li>
<p><strong>북마크(Bookmark)</strong>:
웹 브라우저에서 특정 웹 페이지를 빠르게 접근할 수 있도록 저장하는 기능이다.
북마크는 사용자가 자주 방문하는 페이지를 저장해 두고 클릭만으로 쉽게 이동할 수 있게 한다.</p>
</li>
<li>
<p><strong>애플릿(Applet)</strong>:
작은 애플리케이션 프로그램을 의미하는 단어로,
보통 웹 브라우저 내에서 실행되는 작은 자바 프로그램을 의미한다.
그러나 “애플릿"은 여기서 작은 규모의 프로그램 또는 스크립트를 의미한다.</p>
</li>
</ol>
<p>북마클릿은 자바스크립트 코드를 포함하고 있는 북마크로,
사용자가 클릭하면 해당 코드가 실행되어 특정 작업을 수행한다.
이 용어는 북마크의 편리함과 애플릿의 실행 기능을 결합한 형태를 잘 나타낸다.</p>
<p>북마클릿은 1990년대 후반에 등장했으며,
특히 브라우저에서 반복적인 작업을 자동화하거나 웹 페이지를 개인화하기 위한 도구로 널리 사용되었다.
그 후로 웹 개발자들과 사용자들 사이에서 인기를 끌게 되었다.</p>
<div><pre tabindex="0"><code data-lang="js"><span>// background를 노란색으로 변경
</span><span></span>javascript<span>:</span> (<span>function</span> () {
  <span>document</span>.body.style.backgroundColor <span>=</span> <span>"yellow"</span>;
})();
</code></pre></div><div><pre tabindex="0"><code data-lang="js"><span>// 3000ms(3초) 후에 이미지에 빨간 테두리 추가
</span><span></span>javascript<span>:</span> (<span>async</span> () =&gt; {
  <span>async</span> <span>function</span> sleep() {
    <span>return</span> <span>new</span> <span>Promise</span>((r) =&gt; setTimeout(r, <span>3000</span>));
  }
  <span>await</span> sleep().then(() =&gt; {
    <span>const</span> images <span>=</span> <span>document</span>.querySelectorAll(<span>"img"</span>);
    images.forEach((img) =&gt; {
      img.style.border <span>=</span> <span>"2px solid red"</span>;
    });
  });
})();
</code></pre></div><div><pre tabindex="0"><code data-lang="js"><span>// 탭 복제
</span><span></span>javascript<span>:</span><span>void</span>(<span>window</span>.open(location));
</code></pre></div><div><pre tabindex="0"><code data-lang="js"><span>// wayback machine에 현재 페이지 저장
</span><span></span>javascript<span>:</span><span>void</span>(<span>window</span>.open(<span>"https://web.archive.org/save/"</span><span>+</span><span>document</span>.location.href));
</code></pre></div><h2 id="자바스크립트-스니펫">자바스크립트 스니펫</h2>
<ul>
<li><a href="https://goo.gle/devtools-snippets">자바스크립트 스니펫 실행</a> | Run snippets of JavaScript
<ul>
<li>공식 문서에서도 북마클릿의 대체재라고 언급하지만,
‘딸깍’ 클릭만 하면 되는 북마클릿이 더 편하다…</li>
</ul>
</li>
</ul>
<p><img src="https://developer.chrome.com/static/docs/devtools/javascript/snippets/image/the-devtools-documentatio-b98254f550319_856.png" alt="Run snippets of JavaScript"></p>


<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-62?hl=ko#har-imports">Network 패널에서 HAR 가져오기</a> | HAR imports in the Network panel
<ul>
<li><a href="https://developer.chrome.com/docs/devtools/network/reference?hl=ko#export">자세한 내용</a></li>
</ul>
</li>
</ul>
<p><img src="https://developer.chrome.com/static/docs/devtools/network/reference/image/selecting-save-as-har-c-543367c2a7051_856.png" alt="Save all network requests to a HAR file"></p>
<h2 id="chrome-65">Chrome 65</h2>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-65?hl=ko#overrides">로컬 재정의 (Local Overrides)</a>
<ul>
<li><a href="https://developer.chrome.com/docs/devtools/overrides?hl=ko">더 자세한 내용</a></li>
</ul>
</li>
</ul>
<p><img src="https://developer.chrome.com/static/blog/new-in-devtools-65/image/persisting-css-change-ac-3da090318c534.gif" alt="Local Overrides"></p>
<h2 id="chrome-66">Chrome 66</h2>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-66?hl=ko#overrides">Override 파일을 저장할 폴더 지정</a>
<ul>
<li>원본 소스에서 파일 수정 후 저장하면 해당 경로로 파일이 저장됨.</li>
<li>이후 해당 페이지는 항상 Override된 파일을 참조하기 때문에 디버깅 후 해당 파일은 삭제함.</li>
</ul>
</li>
</ul>
<p><img src="https://developer.chrome.com/static/blog/new-in-devtools-66/image/an-example-styles-define-a24be5796e36a_856.png" alt="Local Overrides now works with some styles defined in HTML"></p>
<h2 id="chrome-126">Chrome 126</h2>
<ul>
<li>Console에 자바스크립트 코드를 붙여넣으면 발생하는 <a href="https://developer.chrome.com/blog/self-xss">self-XSS 경고</a>
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-126#self-xss-flag">self-XSS 경고 비활성화</a></li>
</ul>
</li>
</ul>
<div><pre tabindex="0"><code data-lang="js">Warning<span>:</span>
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 <span>of</span> your computer.
Please type ‘allow pasting’ below and hit Enter to allow pasting.
</code></pre></div><p>웹 브라우저에 따라 입력하는 것이 다르다.</p>
<div><pre tabindex="0"><code data-lang="js"><span>// Google Chrome
</span><span></span>allow pasting
</code></pre></div><div><pre tabindex="0"><code data-lang="js"><span>// Microsoft Edge
</span><span></span>console.profile()
</code></pre></div><h2 id="참조">참조</h2>
<ul>
<li>ChatGPT</li>
<li><a href="https://developer.chrome.com/docs/devtools/news?hl=ko">DevTools의 새로운 기능</a> | What’s New in DevTools</li>
</ul>

                    
                    <hr id="EOF">
		    <p>Last modified on 2024-07-29</p>
                    
                </div></div>

임창수 블로그

Changsu

임창수 블로그 https://markruler.github.io/posts/web/google-chrome/ -
Chrome URLs
북마클릿 Bookmarklet
자바스크립트 스니펫
개발자 도구 DevTools
Chrome 62
Chrome 65
Chrome 66
Chrome 126
참조
Chrome URLs
크롬 URL은 Google Chrome 브라우저에서 설정 페이지나 특정 기능으로 빠르게 접근할 수 있게 해주는 내부 주소다.
chrome://about/
크롬 URL 목록
chrome://net-internals/#hsts
HSTS 조회 및 비활성화
chrome://inspect#devices
USB로 모바일 디바이스를 연결해서 개발자 도구(DevTools)로 모바일 크롬 앱을 확인할 수 있다.
북마클릿 Bookmarklet
북마클릿(Bookmarklet)이라는 단어는 북마크(Bookmark)와 애플릿(Applet)의 합성어다.
이 단어는 다음과 같은 이유로 만들어졌다:
북마크(Bookmark):
웹 브라우저에서 특정 웹 페이지를 빠르게 접근할 수 있도록 저장하는 기능이다.
북마크는 사용자가 자주 방문하는 페이지를 저장해 두고 클릭만으로 쉽게 이동할 수 있게 한다.
애플릿(Applet):
작은 애플리케이션 프로그램을 의미하는 단어로,
보통 웹 브라우저 내에서 실행되는 작은 자바 프로그램을 의미한다.
그러나 “애플릿"은 여기서 작은 규모의 프로그램 또는 스크립트를 의미한다.
북마클릿은 자바스크립트 코드를 포함하고 있는 북마크로,
사용자가 클릭하면 해당 코드가 실행되어 특정 작업을 수행한다.
이 용어는 북마크의 편리함과 애플릿의 실행 기능을 결합한 형태를 잘 나타낸다.
북마클릿은 1990년대 후반에 등장했으며,
특히 브라우저에서 반복적인 작업을 자동화하거나 웹 페이지를 개인화하기 위한 도구로 널리 사용되었다.
그 후로 웹 개발자들과 사용자들 사이에서 인기를 끌게 되었다.
// background를 노란색으로 변경
javascript: (function () {
  document.body.style.backgroundColor = "yellow";
})();
// 3000ms(3초) 후에 이미지에 빨간 테두리 추가
javascript: (async () => {
  async function sleep() {
    return new Promise((r) => setTimeout(r, 3000));
  }
  await sleep().then(() => {
    const images = document.querySelectorAll("img");
    images.forEach((img) => {
      img.style.border = "2px solid red";
    });
  });
})();
// 탭 복제
javascript:void(window.open(location));
// wayback machine에 현재 페이지 저장
javascript:void(window.open("https://web.archive.org/save/"+document.location.href));
자바스크립트 스니펫
자바스크립트 스니펫 실행 | Run snippets of JavaScript
공식 문서에서도 북마클릿의 대체재라고 언급하지만,
‘딸깍’ 클릭만 하면 되는 북마클릿이 더 편하다…
개발자 도구 DevTools
Chrome 62
Network 패널에서 HAR 가져오기 | HAR imports in the Network panel
자세한 내용
Chrome 65
로컬 재정의 (Local Overrides)
더 자세한 내용
Chrome 66
Override 파일을 저장할 폴더 지정
원본 소스에서 파일 수정 후 저장하면 해당 경로로 파일이 저장됨.
이후 해당 페이지는 항상 Override된 파일을 참조하기 때문에 디버깅 후 해당 파일은 삭제함.
Chrome 126
Console에 자바스크립트 코드를 붙여넣으면 발생하는 self-XSS 경고
self-XSS 경고 비활성화
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()
참조
ChatGPT
DevTools의 새로운 기능 | What’s New in DevTools
- https://markruler.github.io/posts/web/google-chrome/ - Im Changsu 2020 - 2024

👾 웹 개발자가 알면 유용한 구글 크롬(Google Chrome)의 기능

댓글