반응형
반응형

[chrome] 크롬 화면 분할 확장프로그램 

 

 우선 설정 > 모양 > 테마 (Chrome 웹 스토어 열기) 클릭

 웹 스토어에서 확장 프로그램을 검색한다. Split Tabs 라는 프로그램이다.

 

Split Screen made easy. Resize the CURRENT tab and tabs to the RIGHT into layouts on separate windows. w/ Multi Monitor Support.

 

For a more easily readable description please visit:

 

https://github.com/peterdotjs/tab-resize

 

***** Version 2.3.0

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

Added default shortcut keys for:

Ctrl + Shift + Z: Undo Last Resize

Ctrl + Shift + 1: 1x1 Resize

Ctrl + Shift + 2: 1x2 Resize

Ctrl + Shift + 4: 2x2 Resize

 

www.youtube.com/watch?v=GFHl98nAV04

 

브라우저 상단에서 설정할 수 있다.

 

반응형
반응형

기본 브라우저로 Chrome 설정

  1. 컴퓨터에서 시작 메뉴 를 클릭합니다.
  2. 설정 을 클릭합니다.
  3. 기본 앱을 엽니다. 기존 버전: 시스템 기본 앱을 클릭합니다. ...
  4. 하단의 '웹 브라우저'에서 현재 브라우저를 클릭합니다. ...
  5. '앱 선택' 창에서 Chrome을 클릭합니다.

 

 

반응형

'프로그래밍 > Web' 카테고리의 다른 글

jquery UI - datePicker  (0) 2019.10.02
우편번호 API - 다음  (0) 2019.09.30
크롬(Chrome) autoplay policy  (0) 2019.09.18
웹개발자가 되기 위한 로드맵, 2019 - DevOps  (0) 2019.09.11
Youtube 반복재생 안될때  (0) 2019.07.01
반응형
반응형
반응형
[Chrome] Visual Inspector by CanvasFlip


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


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

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


...




...




반응형
반응형

[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.

...

반응형
반응형

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

 

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

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

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

 

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

 

 

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

반응형

+ Recent posts