Web Site 나 Web App 등의  Cross Browser Testing 을 지원하는 Browserling 이라는 서비스를 소개한다.

Browserling 사이트에 접속하면 다음과 같이 캐리커쳐같은 분위기의 사이트가 나타난다.



 URL 란에 자신이 테스트하고 싶은 URL 을 입력하고, Test 하고싶은 Browser 와 버전을 선택하고 Run 을 수행하면 다음과 같이 선택한 Browser 위에 URL 이 랜더링되어 나타난다.

 정확히는 자신의 Browser 의 Canvas 위에 Browserling 에서 생성한 VM 과 Browser 가 나타난 것이다.

 우측의 브라우져모양을 클릭하면 현재 상태에서 Browser 와 버전을 바꿀수가 있다.


 해상도가 쓰여진 버튼을 누르면 현재 상태에서 해상도를 바꿀수가 있다.



보기에는 장난스러운 이 서비스도 나름 유료라서 무료로는 3분의 세션시간을 제공한다. 또한 ssh tunnels 등도 이용할 수 없다.



 자동화 테스트를 위한 testling-ci 도 제공을 하고 있어서 갖출것은 다 갖추고 있다.



Cross Browser Testing 로는 기본에 충실한 Service 로 보인다.


'Web' 카테고리의 다른 글

[Browser] Bookmarklet  (0) 2014.08.23
Browser Object Model  (0) 2014.02.03
[Brackets] Open source code editor for the web  (2) 2013.12.10
Web Dev Tools Review  (0) 2013.12.10
[jsFiddle] Online 웹개발 및 공유 서비스  (1) 2013.03.14
Posted by leechwin
,

 Brackets 라는 Web 기술로 구현된 Code Editor 를 소개하려고 한다.


Brackets 은 Adobe 에서 관리하고 있는 Opensource 프로젝트이다.

Download site 에서 인스톨러를 다운받아 자신의 PC 에서 Code Editor 로 쓸 수도 있고, Web Page 에서 Editor 로 사용 할 수도 있다.


Code Editor 에서는 HTML, CSS, JavaScript 언어를 지원한다.



구성

  Brackets 은 전체적으로 다음과 같은 구성으로 분류된다.

  • Menu
  • Sidebar
  • Editor
  • Preview

Menu

  기본으로 File, Edit, View, Navigate, Debug, Help 메뉴로 나뉘며, Extensions 플러그인을 설치하면 추가로 메뉴가 추가될 수도 있다.

  • File
  •  
    • New File: 새로운 파일을 생성한다. 단 확장자까지도 입력해야한다.
      • html, javascript, css 파일에 대한 템플릿은 따로 존재하지 않지만, Extenstion 설치를 통하여 템플릿으로 부터 새로운 파일 생성이 가능하다.
    • Live Preview: 현재 프로젝트에 대한 Preview 를 크롬을 통해 보여준다.
    • Live Highlight: Editor 에서 커서가 위치되어있는 Tag를 Live Preview 에서 해당 태그 위치를 표시
    • Project Settings...: Live Preview Base URL 을 변경
    • Install Extension: 외부 Extenstion을 설치 할 수 있다.
  • Edit
  • View
  • Navigate
  • Debug
    • Show Developer Tools: 현재 Brackets 에 대한 Remote Inspector 를 실행한다.    
    • Reload Brackets: 현재 실행중인 Brackets 을 다시 실행한다.
    • New Brackets Windows: 새로운 창으로 Brackets 을 하나 더 실행한다.
    • Switch Languages: 다국어 지원
    • Show Performance Data: 현재 수행중인 프로젝트에 대한 퍼포먼스 수치를 보여준다.
    • Enable Node Debugger: Node 디버깅을 위한 옵션
    • Log Node State to Console: Node 현재 상태를 Browser 의 console 에 출력한다.
    • Restart Node: Node 를 재시작
  • Help


Sidebar

 Sidebar 는 Recent Files, Project Configuration, Resources Control 등에 따라 Contenxt Menu 가  나뉜다.

  • Recent Files
  • Project Configuration: 한번에 하나의 프로젝트만 열 수 있다.
  • Resources Control: Delete, Add, Import 등의 기능은 없어서 프로젝트 폴더에 원하는 Resource 를 Delete, Add 한 후 Brackets 를  F5 로 Sync 를 맞추어야 한다.


Editor

 Editor 에서는 HTML, CSS, Javascript 를 지원한다.

  • Code hint
    • HTML, CSS, Javascript 에 대해서 Code Asssit 와 같은 기능을 제공한다. 단축키는 Ctrl+Space 이다.
    • HTML: tags, attribute names and values
      •  
    • CSS: property names and values
    • Javascript: property names
  • Validation
    • Javascript Validator 로 JSLint 가 적용되어있으나, Extension 을 통해서, CSS, HTML Validator 를 추가가 가능하다.
  • Quick Edit
    • HTML Tag 에 대한 스타일이 CSS 파일에 정의되어 있으면, 해당 Tag 에서 단축키(Ctrl+E)로 HTML Editor 내에 CSS 파일의 해당 내용이 보여지며 수정도 가능하다.
    • JavaScript 에서는 해당 구현부분이 보여지며 수정도 가능하다.
    • CSS 에서는 Color 값에 대해서는 Color Picker 가 제공된다.
    • Image Preview 와 Pixel Guides 를 제공하여 CSS Sprite 등에 유용하게 픽셀을 계산할 수 있다.
  • Live highlight
  • HTML Editor 에서 Tag 를 클릭하면 해당 부분이 Live Preview 상에서 박스로 표현이 된다.
  • Live Preview
    • Editor 에 대한 실시간 Preview 로 Chrome Base 이다.
    • Brackets 의 우측 상단에 번개마크를 클릭하여서도 실행이 가능하다.
    • CSS 는 수정시 바로 Preview 에 반영되고, HTML, Javascript 는 Save 시에만 Preview 에 반영이 된다.

Extension

 Extension 은 외부의 플러그인을 추가 설치가능한 옵션으로 다음 URL 에 70여가지 이상의 많은 Extension 들이 구현되어 있다.

 - https://github.com/adobe/brackets/wiki/Brackets-Extensions

 

  • Menu > File > Install Extension > 에 해당 Extension 에 대한 URL 을 기술하고 Install 버튼을 누르면 된다.
  • Extension 으로 추가가능한 주요 항목들은 다음과 같다.
    • Snippets
    • Prefixr
    • Quick Markup
    • HTML Tempaltes
    • Auto-match pairs
    • Auto Formatter
    • TabToSpace
    • Beaufiy
    • Minifier
    • CSSLint
    • JSHint
    • W3CValidator
    • Annotate
    • Themes
    • Code folding
    • Hover Preview
    • Markdown Preview
    • etc..


Slideshare: http://www.slideshare.net/ChanghyunLee4/brackets-review



'Web' 카테고리의 다른 글

Browser Object Model  (0) 2014.02.03
[Browserling] Cross Browser Testing Service  (0) 2013.12.10
Web Dev Tools Review  (0) 2013.12.10
[jsFiddle] Online 웹개발 및 공유 서비스  (1) 2013.03.14
[Browser] 사용중인 Web Browser 알아내기  (2) 2013.03.14
Posted by leechwin
,

Web Dev Tools Review

Web 2013. 12. 10. 11:19
  • Outline
    • Command-line
    • Terminal
    • Quick Start
    • Recorder
    • Editor
    • Chrome DevTools
    • Integration tools
    • Synchronized
    • Visual regression testing
    • Simulate real-network conditions
    • Live testing and Screenshots
    • Mobile Web


Posted by leechwin
,

온라인상에서 웹개발 및 테스트, 공유가 가능한 서비스가 있다.


바로 jsFiddle 이다.



단순한 회원가입 과정을 거치면 다음과 같은 화면이 나온다.



Create a new Fiddle 버튼을 누르면 자기만의 프로젝트를 하나 만들 수 있다.

  • 4개로 나뉜 에디터가 나타나고 각각 HTML, CSS, Javascript 를 입력 할 수 있고, Result 창에서는 결과를 볼 수 있다.
  • HTML 을 입력할때에는 HTML 태그를 비롯하여 META 태그, HEAD 태그, BODY 태그는 없어도 된다.
    • 창에 보이는 CSS, Javascript 에디터의 소스는 기본적으로 HTML 소스에 반영이 된다.
    • 외부 Javascript, CSS 소스는 좌측에 External Resources 버튼을 클릭하여 링크를 걸어줄 수 있다.



상단메뉴

  • Run
    • 현재 프로젝트를 실행하는 버튼으로 우측하단에 Result 화면에서 확인 할 수 있다.
  • Debug on Mobile
  • Save
    • 현재 프로젝트를 저장하여 다른사람과 공유 가능하다.
    • Save 를 하면  Update, Fork, Share 메뉴가 더 생긴다.
      • Update
        • 현재 프로젝트를 Update
      • Fork
        • 현재 프로젝트를 Fork
      • Base
        • Base 프로젝트로 이동
      • Share
        • 다른사람에게 현재 프로젝트를 공유가능
  • TidyUp
    • Editor 의 Indentation 을 정렬해주는 버튼
  • JSHint
    • Javascript Validation


좌측 네비게이션

  • jsFiddle Settings Sidebar Document
  • Frameworks & Extensions
    • jQuery, jQuery Mobile, YUI 등 다양한 외부 라이브러리를 적용한 프로젝트를 구성 할 수 있다.
    • onLoad, onDomready 등의 함수를 overloading 가능하다.
  • Fiddle Options
    • Title, Description
      • jsFiddle 에서 보여지는 Tilte bar, Description 을 수정 할 수 있다.
    • Normalized CSS
      • 기본 CSS 인 normalized.css 적용여부
    • Body Tag
      • body 에 class 등을 적용하는 등의 customizing 가능
    • DTD
      • HTML5, XHTML, HTML4 등의 DTD 설정
    • Freamwork <script> attribute
  • External Resources
    • 외부 Resources 의 URI 를 포함 할 수 있다.
  • Languages
    • 다음과 같이 다양한 웹언어지원
    • HTML, CSS, SCSS, JavaScript, Coffeescript, JavaScript 1.7
  • Ajax Requests
    • Ajax 를 통한 json 등의 시뮬레이션이 가능한 기능으로 보인다.
  • Example
    • 다양한 자바스크립트 라이브러리 예제를 제공한다.



Posted by leechwin
,

웹 기술을 이용하여 개발을 하다보면, 각 브라우져별 호환성을 맞추기 위해 코딩을 다르게 해야 할 경우가 종종 생겨난다.


많은 자바스크립트 라이브러리들이 브라우져 호환성을 보장해주기도 하지만 때론 개발자의 손길이 필요 할 경우도 종종 생겨난다.


각 브라우져별로 지원하는 특이한 CSS, Javascript 특성으로 사용자가 사용중인 브라우져 종류를 알아내는 방법을 알아보자.


  • Chrome
    • Selector
    • /* Chrome 24- and Safari 5- */
      ::made-up-pseudo-element, .selector {}
    • Media Query
    • /* Chrome, Safari 3+ */
      @media screen and (-webkit-min-device-pixel-ratio:0) {}
    • JavaScript
    • /* Chrome */
      var isChrome = !!window.chrome;

  • Firefox
    • Selector
    • /* Firefox 1.5 */
      body:empty .selector {} /* Firefox 2+ */
      .selector, x:-moz-any-link {} /* Firefox 3+ */
      .selector, x:-moz-any-link; x:default {} /* Firefox 3.5+ */
      body:not(:-moz-handler-blocked) .selector {}
    • Media Query
    • /* Firefox 3.5+, IE 9/10, Opera */
      @media screen and (min-resolution: +72dpi) {}
      
      /* Firefox 3.6+ */
      @media screen and (-moz-images-in-menus:0) {}
      
      /* Firefox 4+ */
      @media screen and (min--moz-device-pixel-ratio:0) {}
    • JavaScript
      /* Firefox */
      var isFF = !!navigator.userAgent.match(/firefox/i);
      
      /* Firefox 2 - 13 */
      var isFF = !!window.globalStorage;
      
      /* Firefox 2/3 */
      var isFF = /a/[-1]=='a';
      
      /* Firefox 3 */
      var isFF = (function x(){})[-5]=='x';
      
    • Miscellaneous
    • /* Firefox 3+ */
      @-moz-document url-prefix() {}

  • Internet Explorer
    • Selector
    • /* IE 6 and below */
      * html .selector  {} 
      .suckyie6.selector {} /* .suckyie6 can be any unused class */
      
      /* IE 7 and below */
      .selector, {}
      
      /* IE 7 */
      *:first-child+html .selector {} 
      .selector, x:-IE7 {} 
      *+html .selector {} 
      
      /* Everything but IE 6 */
      html > body .selector {}
      
      /* Everything but IE 6/7 */
      html > /**/ body .selector {}
      head ~ /* */ body .selector {}
      
      /* Everything but IE 6/7/8 */
      :root *> .selector {} 
      body:last-child .selector {} 
      body:nth-of-type(1) .selector {} 
      body:first-of-type .selector {}
      
    • Property/Value
    • /* IE 6 */
      .selector { _color: blue; } 
      .selector { -color: blue; }
      
      /* IE 6/7 - any combination of these characters: 
       ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
      .selector { !color: blue; } 
      .selector { $color: blue; } 
      .selector { &color: blue; } 
      .selector { *color: blue; } 
      /* ... */
      
      /* IE 6/7 - acts as an !important */
      .selector { color: blue !ie; } 
      /* string after ! can be anything */
      
      /* IE 8/9 */
      .selector { color: blue\0/; } 
      /* must go at the END of all rules */
      
      /* IE 9/10 */
      .selector:nth-of-type(1n) { color: blue\9; }
      
      /* IE 6/7/8/9/10 */
      .selector { color: blue\9; } 
      .selector { color/*\**/: blue\9; }
      
      /* Everything but IE 6 */
      .selector { color/**/: blue; }
      
    • Media Query
      /* IE 6/7 */
      @media screen\9 {}
      
      /* IE 6/7/8 */
      @media \0screen\,screen\9 {}
      
      /* IE 8 */
      @media \0screen {}
      
      /* IE 8/9/10 & Opera */
      @media screen\0 {}
      
      /* IE 9/10, Firefox 3.5+, Opera */
      @media screen and (min-resolution: +72dpi) {}
      
      /* IE 9/10 */
      @media screen and (min-width:0\0) {}
      
      /* IE 10+ */
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
      
      /* Everything but IE 6/7/8 */
      @media screen and (min-width: 400px) {}
      
    • JavaScript
    • /* IE <= 8 */
      var isIE = '\v'=='v';
      
      /* IE 6 */
      (checkIE = document.createElement("b")).innerHTML = ""; 
      var isIE = checkIE.getElementsByTagName("i").length == 1;
      
      /* IE 7 */
      (checkIE = document.createElement("b")).innerHTML = ""; 
      var isIE = checkIE.getElementsByTagName("i").length == 1;
      navigator.appVersion.indexOf("MSIE 7.")!=-1
      
      /* IE 8 */
      (checkIE = document.createElement("b")).innerHTML = ""; 
      var isIE = checkIE.getElementsByTagName("i").length == 1;
      
      /* IE 9 */
      (checkIE = document.createElement("b")).innerHTML = ""; 
      var isIE = checkIE.getElementsByTagName("i").length == 1;
      
      /* IE 10 */
      var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;
      
      /* IE 10 */
      var isIE = document.body.style.msTouchAction != undefined;
      

  • Safari
    • Selector
    • /* Safari 2/3 */
      html[xmlns*=""] body:last-child .selector {} 
      html[xmlns*=""]:root .selector  {}
      
      /* Safari 2/3.1, Opera 9.25 */
      *|html[xmlns*=""] .selector {}
      
      /* Safari 5- and Chrome 24- */
      ::made-up-pseudo-element, .selector {}
      
    • Media Query
    • /* Safari 3+, Chrome */
      @media screen and (-webkit-min-device-pixel-ratio:0) {}
    • JavaScript
      /* Safari */
      var isSafari = /a/.__proto__=='//';
      



Posted by leechwin
,

크롬 브라우져를 실행할 때 option 등을 주어서 실행할 수 있다.

크롬에 옵션을 주어 실행하는 방법과 유용한 옵션에 대해 알아보도록 하자.


크롬에 옵션을 주어 실행하는 방법.


보통 바로가기로 크롬을 실행하는데 다음과 같이 바로가기 옵션을 수정하는 방법이 있다.


1. 다음과 같이 크롬의 바로가기버튼에 대고 마우스 우클릭후, 속성을 연다.

   


2. 바로가기 탭에서 대상(T): 에 원하는 옵션을 chrome.exe 뒤에 추가해준다.

   다음의 예제는 --allow-file-access-from-files 속성을 추가한 예제이다.

   옵션을 추가 후 크롬을 재시작하면 해당 속성이 반영된 크롬이 시작된다.

   



크롬의 유용한 옵션

  • --allow-file-access-from-files

    • 로컬에서 html 파일을 수정한 후 크롬으로 확인하고 싶을때 크롬에서 file:// 프로토콜을읽지 못하는 경우가 있다. 이옵션으로 수행하면 로컬의 파일을 크롬에서 읽을 수 있다.
  • --disable-web-security
    • AJAX 의 cross-domain 문제를 피해갈 수 있다.
  • --disable-translate
    • 국가별 언어에 따른 크롬 자동번역 팝업을 안뜨게 한다.
  • --window-size=w,h
    • 크롬이 뜰때 사이즈를 조절 할 수 있다.
    • ex) --window-size=300,700


더많은 크롬 옵션 : http://peter.sh/experiments/chromium-command-line-switches/


Posted by leechwin
,