Layout visualizer like a Zeplin

Latest Version

Version

1.4.2

Update

February 12, 2022

Size

2.14MiB

Developer

Ryan's ZZaplin Extension

짭플린(ZZapin)은 페이지 내의 레이아웃과 요소간의 거리를 쉽게 볼 수 있게 만든 확장 프로그램입니다.

It is an extension program that makes it easy to see the layout within the page and the distance between elements.

:: Release Note

1.1 : 버그 수정 및 UI 개선, window resize에 대응

1.2 : B키를 통해 DOM 객체 수와 태그 목록 볼 수 있는 기능 추가

1.3 : on/off 기능 추가 및 버그 수정

1.3.1 : 콘솔에 찍히는 불린값 제거

1.3.2 :
- fixed class 명 변경 (css 충돌 해결)
- clear키 연타시에 적용되지 않던 부분 수정
- 페이지 레이아웃 input요소 안에서는 작동 안하게 수정
- 이제 T버튼으로 on/off toggle이 가능합니다.
- POPUP 가독성 확보

1.3.3:
- 토글(T)버튼 삭제.

1.4 :
- 마진과 패딩의 px 박스가 좀 더 자연스러운 위치로 이동했습니다.
- style에 display와 flex, fontFamily 가 추가되었습니다.
- 이제 infoBox에서 클래스명도 확인이 가능합니다.

1.4.1:
- 클리어 버튼(C)로 레이아웃 가이드라인(B)도 제거가 가능합니다.

1.4.2:
class 겹침 이슈로 타 사이트 레이아웃이 깨지는 이슈 수정했습니다.(ex. Medium)

----------------------------

많은 피드백 부탁드립니다!

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Ryan's ZZaplin", "version": "1.4.2", "description": "Layout visualizer like a Zeplin", "permissions": [ "storage", "declarativeContent" ], "background": { "scripts": [ "background.js" ], "persistent": false }, "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'", "content_scripts": [ { "matches": [ "" ], "css": [ "main.css" ], "js": [ "jquery.js", "constants.js", "maker.js", "util.js", "main.js" ], "run_at": "document_end" } ], "options_page": "options.html", "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/zzaplin16.png", "32": "images/zzaplin32.png", "48": "images/zzaplin48.png", "128": "images/zzaplin128.png" } }, "icons": { "16": "images/zzaplin16.png", "32": "images/zzaplin32.png", "48": "images/zzaplin48.png", "128": "images/zzaplin128.png" }, "manifest_version": 2}

Download CRX(2.14MiB)