[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 홍반장水 홍반장水

구글, iOS용 ‘크롬’ 오픈소스로 공개  http://www.bloter.net/archives/271370

 

구글이 iOS용 ‘크롬’ 앱을 오픈소스 기술로 1월31일 공개했다.

크롬은 구글의 오픈소스 웹 기술 ‘크로미엄

‘ 프로젝트를 기반으로 만든 웹브라우저다. 과거 구글은 애플이 만든 오픈소스 웹브라우저 엔진 ‘웹킷‘을 활용해 크롬을 만들었으나 2013년부터 웹킷을 버리고 독자적인 웹브라우저 엔진 ‘블링크새로운 엔진이긴 하나 웹킷을 기반으로 만든 엔진이기도 하다.close‘를 개발해 크롬에 적용하고 있다.

 

PC용 크롬은 주로 블링크 기반으로 개발됐으나, iOS용 크롬만큼은 그 플랫폼 특징상 웹킷과 블링크를 둘다 지원해야 했다. 구글은 “iOS 플랫폼이 가진 제한 때문에 모든 웹브라우저는 웹킷 렌더링 엔진을 이용해야 했다”라며 “이 과정에서 복잡성이 추가돼 소스코드를 공개하고 싶지 않았다”라고 iOS용 크롬만 오픈소스 기술이 아니었던 이유를 밝혔다.

 

 

이번 공개로 크롬은 안드로이드, 맥, 윈도우, 리눅스, 크롬OS 버전과 더불어 iOS용 크롬까지 모두 소스코드가 공개됐으며, 앞으로 오류 및 개선사항 등 외부 피드백을 더 쉽게 받을 수 있게 됐다. 구글은 공식 블로그를 통해 “향후 크롬 관련 개발 속도는 더욱 빨라질 것”이라고 밝혔다. <더버지>는 “앞으로 크롬 iOS 기술을 기반으로 한 새로운 iOS 웹브라우저도 볼 수 있을 것”이라고 기대했다.

Posted by 홍반장水 홍반장水

[인터넷 브라우저] Chrome인가? IE 인가?


모바일의 인기일 수 있다. PC가 아닌 다른 디바이스에서 인터넷 접근시 크롬으로~


그리고, 스마트폰 크롬의 즐겨찾기가  PC 크롬에서도 연동이 되기때문에 많이 사용할 수 밖엔.


구글 포토도 한 몫했다. 구글 포토에 업로드할때 PC 크롬 브라우저에서 업로드 하는 것이 빠르다.


2016년 3월 22일에 구글 포토가 유투브에  업데이트 기능을 올렸다.

앨범기능이 개선되었는데, 이벤트나 여행 등에서 찍은 사진들을 모아 잘 찍힌 사진들을 선별해서

새 앨범을 제안한다. 그리고, 그 앨범에서 각각의 사진에 위치나 캡션을 추가할 수 있다.

이런 기능은 구글 포토가 사진만 업로드 하는 것을 넘어 사용자에게 편리함과 그 사진을 더 오래 기억 할 수 있는 방법을 제시했다.


http://gs.statcounter.com/#browser-KR-monthly-201504-201604

 

 


Source: StatCounter Global Stats - Browser Market Share



Google Photos: Introducing New, Smarter Albums


게시일: 2016. 3. 22.

After an event or trip, Google Photos will now suggest a new album curated with your best shots and the locations of where you've been. Customize it, add text, and invite collaborators to add their photos. Telling your story has never been easier.

Google Photos is available on:
Android: https://goo.gl/55OnIr
iPhone & iPad: https://goo.gl/m5vj7r
Web: https://photos.google.com




Posted by 홍반장水 홍반장水
[Chrome] 크롬 확장 프로그램 - DotVPN 외부 IP로 사이트 접속하는 프로그램

 

 

https://chrome.google.com/webstore/detail/dotvpn-free-and-secure-vp/kpiecbcckbofpmkkkdibbllpinceiihk

 

 

 

 

Posted by 홍반장水 홍반장水
TAG Chrome, 크롬
[Chrome] 구글 크롬 개발자 도구 사용의 이해

 

 

크롬 개발자 도구 안내 : https://developers.google.com/chrome-developer-tools/

 

 

안드로이드 디바이스를 USB로 연결해서 디버깅 하는 법

: https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Posted by 홍반장水 홍반장水

크롬 브라우저 파이썬 쉘 - https://chrome.google.com/webstore

 

크롬브라우저에서 파이썬 쉘 사용하기.

APP과 확장 프로그램이 있는데, 둘다 차이점은 별로 없다.

 

 

Posted by 홍반장水 홍반장水
http://mooki83.tistory.com/2656510

http://cafe.naver.com/webappdev/12105
영문사이트 볼 때 유용할 수도 있는 네이버 영어사전 북마클릿입니다. - linkuco님

linkuco님의 스크립트를 보고
'앗, 이거다!' 힌트를 얻어서 급 만들게 된 스크립트.

크롬에서만 테스트 해봤지만 잘 돌아가는 것을 확인하였다.

추가하는 방법은 $2해주면 된다.

320 - MobileView(340/480)
480 - MobileView(500/320)
786 - MobileView(806/1024)
1024 - MobileView(1044/768)
Custom - MobileView

총 5가지 버전이며
스크롤바를 고려해서 써있는 넓이보다 + 20px씩 더 들어가있다.

다음에는 .. .뭐를 만들어보지?

덧.
user-agent는 고려되어 있지 않기 때문에 모바일로 특화된 페이지는...
user-agent 변경하는 것을 사용해야한다.
(흠.. 관련 자료도 포스팅해야지)
Posted by 홍반장水 홍반장水
크롬으로 jSon 데이터 볼때 사용하자.
https://chrome.google.com/webstore/detail/ahdjpgllmllekelefacdedbjnjaplfjn?hl=ko
Posted by 홍반장水 홍반장水
TAG JSON, 크롬