[Chrome] Visual Inspector by CanvasFlip


‘F12’를 누르면 등장하는 개발자도구는 무척 유용하다. 개발자도구를 활용하면 지금 보고 있는 웹페이지의 구성요소를 확인하고 부분적인 수정도 해 볼 수 있다. 문제는 이 개발자도구가 전혀 직관적이지 못하다는 데 있다. 기본적인 코딩을 모르면 접근성이 대폭 떨어진다. 
이 문제를 해결해줄 수 있는 도구가 등장했다. 


비주얼 인스펙터는 크롬에 설치해 사용하는 확장프로그램이다. 해당 웹사이트의 색상 구성, 글꼴, 이미지 등을 한눈에 확인할 수 있게 보여준다. 개발자도구를 활용하기 편한 방식으로 보여주는 도구다. 개발자와 소통하며 일해야 하는 디자이너나 기획자에게 무척 편리하다. 물론, 직관적인 방식은 누구에게나 접근성이 좋기 때문에 개발자에게도 편하다.

구성요소 중 하나를 클릭하면 어떤 요소인지 알려준다. 직접 수정할 수도 있다. 위치와 사이즈도 변경할 수 있으며, 회전시켜볼 수도 있다. 당연히 색상도 바꿔볼 수 있고, 정렬도 수정해볼 수 있다. 기타 등등 웹디자인에 필요한 대부분 요소를 확인하고 고쳐볼 수 있다. 이렇게 고쳐본 결과물은 이미지 파일로 받을 수도 있다. 당연히 사용자가 지금 보는 화면의 요소만 고쳐본 것일 뿐, 실제 서버에 적용되는 것은 아니기 때문에 걱정할 필요는 없다.


...




...




Posted by 홍반장水 홍반장水

[javascript] Vue.js 응용 프로그램 디버깅을위한 Chrome devtools 확장 프로그램.


GitHub :  https://github.com/vuejs/vue-devtools



크롬브라우저에서 확장프로그램 들어간 다음 "vue.js" 로 검색하면 나옴. 설치!



vue-devtools

Important Usage Notes

  1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.

  2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.

demo

Works with vuex for time-travel debugging:

demo

Installation

Manual Installation

Make sure you are using Node 6+ and NPM 3+

  1. Clone this repo
  2. npm install (Or yarn install if you are using yarn as the package manager)
  3. npm run build
  4. Open Chrome extension page
  5. Check "developer mode"
  6. Click "load unpacked extension", and choose shells/chrome.

Hacking

  1. Clone this repo
  2. npm install
  3. npm run dev
  4. A plain shell with a test app will be available at localhost:8080.

Testing as Firefox addon

  1. Install web-ext

    $ npm install --global web-ext
    

    Or, for Yarn:

    $ yarn global add web-ext
    

    Also, make sure PATH is set up. Something like this in ~/.bash_profile:

    $ PATH=$PATH:$(yarn global bin)
    
  2. Build and run in Firefox

    $ npm run build
    $ npm run run:firefox
    

    When using Yarn, just replace npm with yarn.

...

Posted by 홍반장水 홍반장水

부가서비스, 확장프로그램

 

Chrome to Phone  : https://chrome.google.com/webstore/detail/google-chrome-to-phone-ex/oadboiipflhobonjjffjbfekfjcgkhco?hl=ko

 

설명

Google Chrome to Phone 확장 프로그램을 사용하면 링크 및 기타 정보를 크롬에서 개인 Android 기기로 전송할 수 있습니다.

이 확장 프로그램을 설치하면 링크, 지도, 현재 선택한 텍스트와 전화번호를 내 Android 기기로 손쉽게 전송할 수 있는 버튼이 Google 크롬에 추가됩니다. 링크나 웹페이지
의 선택 영역을 마우스 오른쪽 버튼으로 클릭하여 내 Android 기기로 보낼 수도 있습>니다.

이 기능을 사용하려면 휴대전화에도 'Chrome to Phone' Android 애플리케이션을 설치>해야 합니다. 애플리케이션은 마켓에서 다운로드할 수 있으며('Chrome to Phone' 검색
), Android 2.2('Froyo') 이상이 탑재된 휴대전화에서 사용하실 수 있습니다.

참고: 이 확장 프로그램을 설치하면 다음 약관에 동의하는 것으로 간주됩니다. - http://chrome.google.com/extensions/intl/en/gallery_tos.html 해당 제품의 소스 코드는
 개발자 웹사이트에서 Apache 2.0 라이센스를 부여받아 사용하실 수 있습니다.

 

Chrome 웹 스토어 : https://chrome.google.com/webstore/category/apps?hl=ko

 

responsive 도구 :  Dimensions

Json 데이터 검증 : JSON Formatter

                     Javascript Tools

소스 공유 :           GitHub

 

 

 

Dimensions

 

설명

Easily test responsive websites, even offline.

Dimensions is a responsive web design testing tool. It is the easiest way to test responsive websites at different viewports. It works offline & is compatible with LiveReload.

Features:

* Draggable handle to find breakpoints
* Works with local or remote servers
* Preview Mode shows your site in various types of devices
* Works with JS auto-refreshers including LiveReload

More devices will be coming soon! Head over to http://dimensionsapp.com and add feedback on which devices you would like to see.

Responsive web design testing tool

 

 

 

 

 

 

 

 

Posted by 홍반장水 홍반장水