나는 생계를위한 도구를 구축하고,내가 누구를 읽기 전에하는 가장 일반적인 단일 & #39;s 프런트 엔드는 포맷터를 통해 자신의 HTML 을 실행합니다. 서버 템플릿은 한 줄에 마크 업을 뱉어. 번들러 그것을 붕괴. 누군가가 슬랙에 붙여 넣는 조각은 앵글 브래킷의 벽에 평평하게 중첩의 세 가지 수준으로 도착합니다. 나는 읽을 수없는 것을 디버깅 할 수 없으므로 첫 번째 움직임은 항상 동일합니다: 붙여 넣기,아름다움을 치고,구조가 자신을 드러내게하십시오. 이 가이드는 손으로 마크 업을 다시 들여 쓰곤했던 어린 자신을 건네주고 절반의 시간을 잘못 얻었 으면 좋았을 것입니다.
TL;DR: HTML 포맷터는 마크업을 다시 들여쓰기하여 구조를 읽을 수 있게 하고,다시 축소하여 작게 배송됩니다. 빌드 및 디버깅하는 동안 beautify 를 사용하고,제작을 위해 minify 를 사용합니다. The HTML 형식 Toolz.dev에서는 브라우저에서 두 가지 작업을 모두 수행하고 스크립트, 스타일 및 사전 콘텐츠 바이트를 바이트별로 유지하며 아무것도 업로드하지 않습니다.
HTML 포맷터 란 무엇입니까?
HTML 포맷터는 마크업을 태그 트리로 구문 분석하고 중첩 깊이당 한 단계씩 일관된 들여쓰기로 다시 인쇄하는 도구입니다. 그것이 바로 beautify 방향입니다. 반대로 minify 는 태그 사이의 중요하지 않은 공백을 제거하여 브라우저가 렌더링하는 방법을 변경하지 않고 파일이 가능한 한 작습니다. Toolz.dev 에 있는 것을 포함한 대부분의 좋은 포맷터는 동일한 입력에서 두 가지를 모두 수행합니다.
단어 "insignificant"는 그 문장에서 실제 작업을 하고 있습니다. HTML 에서 어떤 공백은 중요하고 어떤 공백은 중요하지 않습니다. 개행과 닫는 사이에 넣은 두 개의 공백 </li> 그리고 그 다음 <li> 렌더링된 페이지에 대해 아무것도 변경하지 않으므로 포맷터는 자유롭게 추가,제거 또는 정규화할 수 있습니다. But the spaces inside a <pre> 블록 또는 두 인라인 사이의 단일 공간입니다 <a> 요소는 사용자가 보는 것의 일부입니다. 그 차이를 이해하지 못하는 포맷터는 당신의 레이아웃을 행복하게 깨뜨릴 것입니다. 이것은 도움을 주는 포맷터와 불신하는 법을 배우는 포맷터 사이의 경계입니다.
를 사용했다면 더 예쁘다 에디터에서 이미 느낌을 알고 있습니다: 도구가 들여쓰기를 보장하기 때문에 들여쓰기에 신경 쓰지 않습니다. 브라우저 기반 포맷터는 프로젝트를 설정하지 않고도 제어하지 않는 일회성 조각,생성된 출력 및 마크업에 대해 동일한 보증을 제공합니다.
HTML은 왜 애초에 지저분하게 되는 걸까요?
포맷터가 살아남아야 하는 것이 무엇인지 알려주기 때문에 혼란이 어디서 오는지 아는 것이 도움이 됩니다.
첫 번째 소스는 서버 렌더링입니다. PHP 템플릿,Rails 뷰 또는 Blade 파일은 템플릿 엔진이 제작하는 것처럼 느껴지는 공백이 무엇이든 HTML 을 방출하며,축소 미들웨어가 실행된 후에는 종종 수천 자 길이의 한 줄 브라우저에서 문제가 생겼을 때 "View Source,"를 누르면 얻을 수 있습니다.
두 번째 소스는 복사 및 붙여 넣기입니다. 당신은 디자인 시스템에서 구성 요소를 잡아,CMS 에서 조각,또는 누군가가 당신을 보낸 이메일 템플릿,그리고 그것은 소스가 사용 된 간격이 무엇이든 운반: 혼합 탭과 공백,일관되지 않은 중첩,뒤로 공백 워드 프레스와 헤드리스 CMS 출력 내에서 내 주 많은 지출,그리고 CMS 생성 마크 업은 최악의 일부,때문에 그것은 각각 다른 포맷 된 조각에서 조립.
세 번째 소스는 생성된 마크업입니다. 빌드 도구,WYSIWYG 편집기,수출 함수는 인간이 읽을 수 있도록 의도된 적이 없는 HTML 을 생성합니다. 정확하지만 불투명합니다. 포맷터는 감사할 수 있는 것으로 다시 바꿉니다.
공통 스레드는 이러한 소스 중 어느 것도 결과를 읽을 수 있는지 여부에 관심이 없다는 것입니다. 그것이 당신의 일이며,포맷터가 가장 빠른 방법입니다.
HTML을 온라인으로 포맷하려면 어떻게 해야 하나요?
Toolz.dev의 작업 흐름은 약 10초 정도 소요됩니다:
- 열다 HTML 형식 그리고 입력 패널에 마크업을 붙여 넣습니다. 한 줄로 축소되거나,일관되지 않게 들여쓰기되거나,맨 조각으로 되어 있어도 상관없습니다.
- 확장하려면 Beautify를 선택하고 압축하려면 Minify를 선택하세요.
- 아름답게 하기 위해 들여쓰기를 선택합니다: 2 칸,4 칸 또는 탭 두 칸은 일반적인 웹 기본값입니다.
- 선택적으로 틱 "Remove comments" 출력에서 HTML 주석을 제거하려면.
- 결과를 복사하거나 다운로드하세요
.html파일.
모든 것이 클라이언트 측을 실행합니다. 파서는 브라우저의 JavaScript이므로 마크업은 서버에 닿지 않습니다. 그것은 사람들이 가정하는 것보다 더 중요하며 이에 대해서는 다시 설명하겠습니다.
미화, 축소, 어떤 차이가 있나요?
이는 파서를 공유하는 반대 작업이며, 각각에 대해 언제 도달해야 하는지 아는 것이 대부분의 기술입니다.
Beautifying 은 인간을 위한 것입니다. 줄바꿈과 들여쓰기를 추가하여 중첩이 보이도록 하는데,이는 편집,디버깅, 두 가지 버전 차이 또는 풀 요청을 검토하는 동안 원하는 것입니다. 레이아웃 버그를 사냥할 때 먼저 아름답게 하여 어떤 요소가 닫히지 않았는지 또는 한 레벨에 너무 깊게 중첩되어 있는지 확인할 수 있습니다.
축소하는 것은 기계용입니다. 브라우저가 무시하는 공백을 제거하여 파일이 더 작고 전송 속도가 빠릅니다. CSS 또는 JavaScript: 바이트를 와이어 비용 시간 동안 축소하는 것과 같은 이유로 HTML 을 축소하고 큰 페이지에서 공백이 합산됩니다. 이미 기대어 있다면 HTML 미니파이어 프로덕션 압축의 경우 포맷터는 무언가가 파손되었을 때 해당 출력을 다시 읽는 데 사용하는 도구입니다.
실제로 다른 결정에 대해 두 방향을 비교하는 방법은 다음과 같습니다:
| 측면 | 아름답게 하다 | 축소하다 |
|---|---|---|
| 목표 | 가독성 | 가장 작은 파일 |
| 태그 사이의 공백 | 추가되고 정규화되었습니다 | 제거되었습니다 |
| 출력 크기 | 더 크게 | 더 작은 |
| 언제 사용할 것인가 | 편집, 디버깅, 검토 | 생산, 이전 |
| 들여쓰기 | 2 칸, 4 칸, 또는 탭 | 없음 |
| 렌더링된 결과 | 동일한 | 동일한 |
마지막 행은 중요한 행입니다. 두 작업 모두 페이지의 모양을 변경하지 않습니다. 브라우저가 중요하지 않은 변경으로 처리하는 공백만 변경됩니다. 포맷터가 렌더링된 출력을 변경하는 경우 이는 포맷 속성이 아닌 포맷터의 버그입니다.
포맷하면 JavaScript, CSS 또는 미리 포맷된 텍스트가 손상됩니까?
이것은 장난감과 도구를 분리하는 질문이며, 내가 어떤 포맷터를 사용하는지에 대해 까다로운 이유입니다.
특정 요소는 공백과 문자가 중요하고 만져서는 안 되는 콘텐츠를 보유합니다. The WHATWG HTML 표준 분류합니다 script 그리고 style 원시 텍스트 요소 및 textarea 그리고 title 이스케이프 가능한 원시 텍스트 요소로서. 그 안에서 포맷터는 콘텐츠를 불투명하게 취급해야 합니다. a 에서 자바스크립트를 다시 들여쓰려고 한다면 script 태그,그것은 템플릿 리터럴의 내용을 이동하거나,정규식을 변경하거나,다중 줄 문자열 안에서 줄을 이동할 수 있으며,이제 여러분의 코드는 다르게 동작합니다. 그것은 포맷팅 변경이 아니라,포맷터가 도입한 버그입니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 pre element 는 관련된 경우입니다. 전체 목적은 공백을 보존하는 것이므로 텍스트 내용이 쓰여진 그대로 표시됩니다. 내부에 순차적으로 표시되는 포맷터 <pre> 페이지를 눈에 띄게 변경합니다.
Toolz.dev 포맷터는 치료를 통해 이러한 모든 것을 처리합니다 script, style, pre, textarea, 그리고 title 원시 콘텐츠로: 그것은 그들 주위에 HTML 을 다시 들여 쓰기하지만 그대로 자신의 내부 텍스트를 복사합니다. 귀하의 코드와 미리 포맷 된 텍스트는 동일한 바이트 - 바이트에 대해 나와. 내가 그것을 구축하면서이 테스트 할 때,수락 표시 줄은 간단했다: a <script> 포함하는 if(a<b){x=1} 손대지 않고 생존해야 하며,그렇습니다. 인라인 스크립트나 스타일이 포함된 마크업으로 작업하는 경우,이는 포맷터를 신뢰하기 전에 확인할 속성입니다.
포맷터가 깨지거나 불완전한 HTML을 처리할 수 있습니까?
실제 HTML 은 XML 이 그렇듯이 잘 구성된 경우가 거의 없으며 완벽을 요구하는 포맷터는 쓸모가 없습니다. 브라우저는 관용성이 유명하다: the HTML 구문 분석 알고리즘 생략된 끝 태그와 잘못 중첩된 요소를 처리하는 방법을 정확하게 정의합니다. 이것이 바로 페이지가 누락된 이유입니다 </li> 여전히 괜찮게 렌더링합니다. 좋은 포맷터는 동일한 허용 오차를 빌립니다.
가장 일반적인 경우는 선택적 끝 태그입니다. HTML을 사용하면 다음과 같은 요소에서 닫는 태그를 생략할 수 있습니다 li, p, td, tr, 그리고 option, 사양에 오픈이라고 나와 있기 때문입니다 li 은 묵시적으로 닫혀있을 때 다음 li 시작하다. 그래서 <ul><li>a<li>b</ul> 는 유효하며,Toolz.dev 포맷터는 이러한 암시적 닫기 규칙을 적용하여 생성합니다 <li>a</li> 그리고 <li>b</li> 브라우저가 트리를 구축하는 것과 똑같이 자체 라인에서. A <p> 는 블록 요소가 그 안에서 열릴 때 자동으로 닫히는데, 이는 단락이 블록 내용을 포함할 수 없기 때문이다.
두 번째 경우는 진짜로 깨진 마크업입니다: 태그가 열리고 닫히지 않거나 일치하는 항목이 열리지 않은 길 잃은 닫힘 태그. 포맷터는 문서 끝에 매달려 있는 모든 것을 닫고 경고로 보고하므로 입력이 조용히 추측하는 것이 아니라 불완전하다는 것을 알 수 있습니다. 이러한 경고는 종종 수정하러 온 정확한 버그를 찾는 가장 빠른 방법입니다.
그 행동을 엄격한 포맷터와 비교하고, 손으로 하는 것과 비교해 보세요:
| 접근 | 생략된 끝 태그 | 닫히지 않은 태그 | 속도 |
|---|---|---|---|
| 허용 포맷터 (Toolz.dev) | 암시적 닫기 규칙을 적용합니다 | 자동 닫히고 경고합니다 | 인스턴트 |
| 엄격한 XML 스타일 포맷터 | 종종 오류가 발생합니다 | 오류가 발생했습니다 | 작동하면 즉시 |
| 수동 재 들여쓰기 | 당신이 직접 추적해 | 놓치기 쉬운 | 느리고 오류가 발생하기 쉽습니다 |
나는 맨 아래 줄에 있었고 손으로 순서를 바꾸고 닫히지 않은 것을 놓쳤습니다 div 열에 세 번. 실제 마크 업이 지저분하고 당신이 거부하지,표면 엉망 원하기 때문에 관용 도구가 승리.
언제 포맷터와 편집기를 사용해야 합니까?
만약 당신이 파일을 소유하고 있고 그것이 당신의 프로젝트에 있다면, 당신의 에디터와 프레티어 또는 그와 동등한 것이 포맷을 위한 올바른 집입니다, 왜냐하면 그것은 저장에서 실행되고 팀 전체에서 일관성을 유지하기 때문입니다, 나는 당신이 그것을 교체하라고 제안하는 것이 아닙니다.
브라우저 기반 포맷터는 워크플로우가 남기는 틈새에서 그 자리를 차지합니다. 버그 보고서의 조각을 붙여넣고 지금 당장 읽어야 합니다. dev 박스가 아닌 머신에 있습니다. CMS 출력,이메일 템플릿 또는 repo 에 살지 않은 생성된 마크업을 보고 있습니다. 빌드 단계를 연결하지 않고 단일 스니펫을 축소하려고 합니다. 이러한 모든 경우에 탭을 여는 것이 프로젝트를 구성하는 것보다 빠르며 결과는 동일합니다.
또한 사생활 보호 각도도 있는데,이는 작은 것이 아닙니다. Toolz.dev 파서가 브라우저에서 완전히 실행되기 때문에 내부 URL,미공개 복사본,템플릿에 포함된 API 응답 또는 customer's 데이터가 포함된 마크업은 기기에서 절대 떠나지 않습니다. 많은 온라인 포맷터가 서버에 입력을 게시하여 작업을 수행합니다. 작업 코드베이스의 모든 것에 대해,그것은 당신이 취할 필요가 없는 데이터 노출입니다. 나는 사이트에 있는 모든 도구에 대한 설계 규칙이라는 점에 충분히 신경을 쓰고 있습니다 웹 개발자 툴킷 그리고 가이드 온라인 도구의 데이터 개인 정보 보호.
시간을 절약해 준 실용적인 워크플로우입니다
레이아웃이 잘못 동작할 때 실제로 실행하는 루프는 다음과 같습니다. 중첩이 보이도록 마크업을 아름답게 합니다. 들여쓰기에서 잘못 보이는 레벨을 스캔합니다. 왜냐하면 길 잃은 추가 들여쓰기는 거의 항상 닫히지 않은 태그를 의미하기 때문입니다. 닫히지 않은 정확한 요소의 이름을 자주 지정하는 포맷터 경고를 소스에서 수정합니다. 조각이 생산 예정인 경우 다시 나가는 길에 이를 축소합니다. 전체 주기는 1 분이며,그 1 분의 대부분은 도구와 싸우는 것이 아니라 제가 읽는 것입니다.
동일한 루프가 콘텐츠 감사에 작동합니다. 접근성 또는 SEO 에 대한 마크업을 확인할 때 먼저 아름답게하여 표제 구조와 랜드 마크 요소를 한눈에 볼 수있게 한 다음 특정 조각을 다른 도구로 가져옵니다: 청크를 Markdown 으로 변환하여 문서화 HTML에서 마크다운으로 변환기 또는 비교 테이블을 생성합니다 마크다운 테이블 생성기. 포맷은 구조체를 작업하기에 충분히 읽기 쉽게 만드는 단계입니다. 이러한 도구들이 더 넓은 루틴에 맞도록 하려면,the 개발자 생산성 도구 가이드가 그것을 제시합니다.
자주 묻는 질문
HTML을 온라인으로 포맷하려면 어떻게 해야 하나요?
HTML 을 입력 패널에 붙여넣고,Beautify 를 선택하고,들여쓰기 너비를 선택하고,서식을 클릭합니다. 이 도구는 태그 트리를 구문 분석한 다음 다시 들여쓰기를 한 다음 결과를 복사하거나 다운로드할 수 있습니다. 모든 처리는 브라우저에서 이루어지므로 아무 것도 업로드되지 않습니다.
HTML을 아름답게 하는 것과 축소하는 것의 차이점은 무엇입니까?
Beautifying 은 줄 바꿈과 들여쓰기를 추가하여 중첩이 읽기 쉬우며 편집 및 디버깅에 이상적입니다. Minifying 은 태그 사이의 중요하지 않은 공백을 제거하여 생산을 위해 더 작은 파일을 생성합니다. 둘 다 동일한 렌더링 된 결과를 유지합니다; 공백 만 변경됩니다.
서식이 내 페이지의 모양을 변경합니까?
아니요. 포맷터는 요소,속성, 텍스트가 아닌 태그 사이의 공백만 변경합니다. pre,textarea, inline 텍스트와 같이 공백이 중요한 콘텐츠는 보존되므로 페이지는 포맷 전과 후를 동일하게 렌더링합니다.
포맷터가 내 JavaScript 및 CSS 를 다시 포맷합니까?
아니요. 스크립트 및 스타일 태그 내부의 콘텐츠는 원시 텍스트로 처리되고 그대로 복사됩니다. 도구는 주변의 HTML 을 다시 들여쓰지만 코드 자체에는 절대 닿지 않으므로 템플릿 리터럴,정규식 및 CSS 값은 바이트당 동일하게 유지됩니다.
깨지거나 불완전한 HTML을 처리할 수 있나요?
네,이유 안에서요. 파서는 허용가능합니다: 브라우저가 li,p, td 와 같은 태그에 사용하는 것과 동일한 묵시적 닫힘 규칙을 적용하고,문서 끝에 열려있는 채로 남겨진 태그를 자동 닫을 때 경고를 보여줘 마크업이 불완전했음을 알 수 있습니다.
민감한 데이터가 포함된 HTML을 포맷하는 것이 안전한가요?
예. 파서는 브라우저에서 전적으로 JavaScript 로 실행됩니다. 네트워크 요청이 마크업을 전달하지 않으며,아무것도 저장되지 않으며,이 도구는 로드된 후 오프라인으로 작동합니다. 내부 링크,API 응답 또는 출시되지 않은 복사본을 보유한 HTML 은 머신을 떠나지 않습니다.
어떤 들여쓰기 옵션을 사용할 수 있나요?
출력 아름답게하기 2 칸,4 칸 또는 탭을 지원합니다. 두 칸은 웹 프로젝트의 일반적인 기본값이며,네 칸은 더 넓은 들여쓰기를 선호하는 팀에 적합하며,탭은 각 개발자가 편집기에서 자신의 표시 너비를 설정할 수 있습니다.
HTML 포맷터는 HTML 축소기와 어떻게 다른가요?
포맷터는 하나의 도구에서 양방향을 가지고 있습니다: 읽기를 위해 마크업을 확장하기 위해 아름답게 하고,배송을 위해 축소하기 위해 축소합니다. 전용 축소기는 압축만 합니다. 주로 프로덕션 압축이 필요한 경우 HTML 축소기는 이에 중점을 둡니다; 읽기와 배송 사이를 전환하면 포맷터가 두 가지를 모두 다룹니다.
무료로 마크업을 포맷하세요 HTML 형식. 그것은 당신의 브라우저에서 완전히 달리고,당신의 대본 및 미리 포맷된 내용을 온전하게 지키고,결코 바이트를 올려주기하지 않습니다.
