[BrowserSync] 크로스 브라우져 테스트 툴 BrowserSync

위의 이미지는 브라우져 테스트 툴인 BrowserSync의 홈페이지에 있는 BrowserSync의 특징들입니다.

간단하게 BrowserSync 설치와 사용법에 대해서 알아보겠습니다.

1. BrowserSync 설치

  1-1. Node.js 설치

1-1-1. Node.js 홈페이지 에서 Node.js를 다운로드 받은 후 설치합니다.

  1-2. BrowserSync 설치

1-2-1. Command 창을 열고 다음 명령어를 통해서 설치합니다.

npm install -g browser-sync

2. BrowserSync 시작

   2-1. 프록시 모드: 이미 서버를 실행 중인 경우(일반적) 

2-1-1. Command 창에서 다음 명령어를 실행합니다.(4200은 제 경우의 포트 번호입니다.)

browser-sync start --proxy "localhost:4200" --files ["css/*.css", "js/*.js", "*.html"]

   2-2. 서버 모드(정적 사이트)

2-2-1. HTML 파일만 사용하는 경우 서버 모드를 사용합니다. BrowserSync는 미니 서버를 시작하고 사이트를 볼 수 있는 URL을 제공합니다.

2-2-2. Command 창에서 다음 명령어를 실행합니다.

browser-sync start --server --files "css/*.css"

3. 화면

3-1. 설치가 완료되고 실행한 경우 다음과 같은 화면을 보게 됩니다.(모드에 따라 다름)

3-2. 사이트로의 접속은 Local을 이용하고 BrowserSync UI 화면으로의 접속은 UI쪽 URL을 이용하여 접속하면 됩니다. 대략 아래와 같은 느낌입니다.

---

The above image is the features of BrowserSync on the homepage of BrowserSync, a browser test tool.

Let's take a quick look at installing and using BrowserSync.

1. Install BrowserSync

  1-1. Install Node.js

1-1-1. Download Node.js from Node.js homepage and install it.

  1-2. Install BrowserSync

1-2-1. Open the Command window and install it using the following command.

npm install -g browser-sync

2. Start BrowserSync

   2-1. Proxy mode: If the server is already running (typical) 

2-1-1. In the Command window, execute the following command (4200 is the port number in my case).

browser-sync start --proxy "localhost:4200" --files ["css/*.css", "js/*.js", "*.html"]

   2-2. Server mode (static site)

2-2-1. If you only use HTML files, use server mode. BrowserSync launches the mini server and provides a URL to view the site.

2-2-2. In the Command window, execute the following command.

browser-sync start --server --files "css/*.css"

3. Screen

3-1. When the installation is complete and executed, you will see the following screen (depending on the mode)

3-2. You can connect to the site using Local and connect to the BrowserSync UI screen using the UI URL. The screen feels roughly like this.