웹 개발을 향상시키는 6 개의 유용한 북마크

북마크는 웹 브라우저에 추가 할 수있는 JavaScript 기반 북마크입니다. 이 기사에서는 웹 개발 워크 플로우를 개선하는 데 도움이되는 강력한 브라우저 팁과 이러한 팁을 시간 절약형 북마크 위젯으로 변환하는 방법을 보여줍니다.

1. 설계 모드를 활성화하십시오
2. 모든 요소에 배경을 적용하십시오
3. 이벤트 시뮬레이션
4. 쿠키를 설정하십시오
5. 스위치 클래스
6. 색상 선택기 북마크
7. 다른 북마크 가제트를 생각할 수 있습니까?

설계 모드를 활성화하십시오

디자인 패턴 (JavaScript 속성이기 때문에 DesignMode의 스타일)은 실시간 웹 사이트에서 다양한 사본 변경을 실험하는 사람들에게 적합합니다. 예를 들어, 웹 사이트 디자인 프로세스에서 콘텐츠를 읽는 효과를 관찰하는 카피라이터 또는 특정 글꼴 크기의 특정 공간에 텍스트가 편안하게 맞는지 확인하려는 디자이너.

JavaScript에는 전체 HTML 문서를 편집 할 수있는 매우 간단한 기능이 있습니다. HTML의 ContentEditable = "True"이름 값 속성 (또는 JavaScript의 Contentestable = "True")과 정확히 동일하지만 문서 전체에서 작동합니다. 작동 방식을 이해하려면 먼저 관련 키보드 바로 가기를 사용하여 브라우저 콘솔을 엽니 다.

• 크롬 : 옵션 ⌘ j / shift ctrl j
• Firefox : 옵션 option k / shift ctrl k
• 사파리 : 옵션 option c / shift ctrl c

다음으로, document.designMode="on" 입력하고 return을 누른 다음 텍스트 요소를 클릭하십시오. 이 텍스트 요소를 클릭하여 이러한 텍스트 요소 (및 기타 모든 텍스트 요소)를 편집 할 수 있음을 알 수 있습니다. 라이브 웹 사이트에서 텍스트를 편집하는 이러한 방법은 DevTools를 열고 마우스 오른쪽 버튼을 클릭하고 텍스트 편집 옵션을 선택하는 것보다 훨씬 빠르고 노력합니다.

"디자인 패턴"이이 기능에 대한 가장 정확한 설명인지 확실하지 않지만 여전히 매우 유용하며 놀랍게도 오랫동안 주변에있었습니다.

그렇다면 그것을 가능하게하는 더 빠른 방법은 무엇입니까? 물론 책갈피 가제트입니다! javascript: document.designMode="on";void 0;

모든 요소에 배경을 적용하십시오

HTML 요소에 배경이 없으면 경계를 시각화하거나 다른 요소와의 거리를 정확하게 측정하기가 어렵습니다. 개발자는 시각적 불균형 (즉, "잘못된 것처럼 보이지만 실제로는 그렇지 않은 경우), 여백 접힘 (특정 여백 무시), 다양한 디스플레이 :/float :/위치 : 문제 등을 다룰 때 경계를 더 잘 시각화해야 할 수도 있습니다.

배경을 적용한다는 것은 모든 HTML 요소에 대한 반투명 배경을 적용하여 경계와 간격을 더 잘 시각화하는 것을 의미합니다. 우리 중 많은 사람들이 일반적으로 DevTools를 열고 selector { background: rgb(0 0 0 / 10%); } 와 같은 CSS 문을 입력하여 스타일 상자에이를 수행합니다. 그러나 이것은 여전히 ​​매우 힘들고 반복적입니다. 책갈피 위젯을 사용하여 단순화 할 수 있습니다.

다시 북마크를 만들려면 URL을 생성합니다. 여기에 사용할 수있는 것은 다음과 같습니다.

 javaScript : document.querySelectorall ( "*"). foreach (element => element.style.background = "rgb (0 0 / 10%)");

투명성 오버레이가 있기 때문에 반투명 배경을 사용하여 각 중첩 요소가 구별 가능하고 그 사이의 거리를 측정 할 수 있도록합니다.

이벤트 시뮬레이션

먼저 일련의 상호 작용이 필요한 웹 이벤트를 테스트해야하거나 특정 조건을 충족해야합니까? 이러한 유형의 기능 테스트 또는 디버깅은 시간이 많이 걸립니다. 이 이벤트 시뮬레이션 북마크 위젯을 사용하여 특정 이벤트를 즉시 트리거하여 바람을 테스트 할 수 있습니다.

이벤트를 시뮬레이션한다는 것은 "임시"버튼을 작성하여 JavaScript 이벤트를 트리거하여 로그인과 같은 일반적인 사용자 인터페이스 조건을 충족시키지 않고도 이벤트를 빠르고 반복적으로 쉽게 테스트 할 수 있습니다.

JavaScript 이벤트 리스너를 설정했다고 가정하면 트리거/조롱하고 다음 URL을 제출하려는 각 이벤트에 대한 책갈피를 만듭니다.

 javaScript : document.querySelector ( "selector"). Click ();

"선택기"를 유일한 선택기로 바꾸고 "클릭"을 "Focus"또는 "Blur"(필요한 경우)로 바꾸거나 코드 스 니펫을 확장하여 스크롤과 같은보다 복잡한 이벤트를 트리거하도록합니다.

쿠키를 설정하십시오

쿠키는 웹 사이트 방문자가 웹 사이트 방문자의 컴퓨터에 저장된 토큰입니다. 쿠키에는 웹 사이트에서 만료 날짜를 초과하거나 삭제 될 때까지 작성된 데이터가 포함되어 있습니다. 쿠키 자체의 존재는 방문자가 로그인되는지 여부를 결정하는 반면 데이터 자체는 사용자 정보를 저장할 수 있습니다.

책갈피 위젯을 사용하여 쿠키를 설정할 수있는 예제 시나리오는 웹 사이트 테스트 기간 동안 로그인을 강제로 강제 할 때입니다. 로그인하고 로그인하지 않은 경우 웹 사이트는 일반적으로 매우 다르게 보이지만 로그인 및 로그 아웃하면 매우 번거 롭을 수 있으므로이 북마크 위젯은 많은 시간을 절약 할 수 있습니다.

Writing Expires = 수동으로 쿠키 날짜는 매우 번거 롭지 만 운 좋게도 쿠키 북마크 위젯 응용 프로그램은 정확한 이름을 알고 있다면 특정 쿠키에 대한 책갈피 위젯을 생성 할 수 있습니다.

스위치 클래스

HTML 요소에 클래스를 추가하거나 삭제하여 토글 클래스라고도하는 새로운 상태 또는 모양 변경을 트리거 할 수 있습니다. 클래스 스위치는 대부분의 라이브 웹 사이트의 무대 뒤에서 발생하지만 테스트 중에 특정 사용자 인터페이스 조건을 만족시키는 데 사용될 수도 있습니다.

클래스 토글은 외관 변경 (예 : 대체 테마 또는 상태) 또는 애니메이션을 트리거하는 데 사용될 수 있지만 개발자 도구를 사용하는 것은 테스트 목적으로 만 사용하는 경우 약간 까다로울 수 있습니다 (즉, 웹 사이트가 실제로 사용자에게는 실행되지 않습니다). 다른 북마크 위젯과 마찬가지로이 책갈피 위젯은 클래스를 빠르게 전환하고 시간을 절약 할 수 있습니다.

다음 북마크 위젯을 작성하여 선택한 선택기와 일치하는 모든 요소를 ​​찾아 '클래스'를 전환합니다.

 javaScript : document.querySelectorall ( "selector"). foreach (element => element.classList.Toggle ( "class"));

색상 선택기 북마크

기술적으로 "북마크 가제트"는 아니지만 Scott Jehl 의이 북마한 데이터 URI는 새로운 탭을 열어줍니다.

그래서 여기에 새로운 컬러 피커 앱이 있습니다! 데이터 URI에 포함 된 HTML 색상 입력 일 뿐이므로 북마크 할 수 있습니다. (직접 추가 할 수 있습니다) : :

data:text/html;charset=utf-8, <title>Color Picker</title> <input type="color">

왜이게 시원한가요? 글쎄, 페이지에서 색상 값을 얻고, 데트 툴을 열고, 요소를 클릭하고, CSS 속성을 두 번 확인하여 해당 값을 찾기 위해 몇 번이나 필요합니까? 이 가제트를 실행하고 요소를 클릭하고 바로 색상을 얻는 것이 좋습니다!

다른 북마크 가제트를 생각할 수 있습니까?

웹 브라우저를 사용하는 번거로운 개발자 도구가 필요한 과도하게 중복 된 웹 개발 워크 플로가 있습니까? 그렇다면 시간을 절약하는 책갈피 위젯을 만드는 것은 매우 쉽습니다 . javascript:

워크 플로를 단순화하기 위해 책갈피 위젯을 만들었다면보고 싶습니다! 의견에 공유하고 멋진 컬렉션을 만들어 보자.

위 내용은 웹 개발을 향상시키는 6 개의 유용한 북마크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!