관심 있는 웹사이트의 모바일 버전을 테스트하기 위해 PC에서 스마트폰 브라우저 에뮬레이터에 액세스해야 합니까? 웹 개발자이거나 웹 개발자가 되고 싶어 작업 중인 프로젝트에 대해 모바일 브라우저를 시뮬레이션해야 할 수도 있습니다. 이유에 관계없이 ^(Regardless)Google Chrome , Mozilla Firefox , Microsoft Edge 및 Opera 에서 모바일 브라우저 에뮬레이터에 액세스하는 방법은 다음과 같습니다.

Chrome^{(Google Chrome)} 에서 모바일 브라우저 에뮬레이터를 켜고 사용하는 방법

Google Chrome 에서 모바일 브라우저 에뮬레이터에서 보려는 웹사이트로 이동합니다. 그런 다음 키보드에서 CTRL + SHIFT + I 키를 누르거나 마우스로 오른쪽 상단 모서리에 있는 세 개의 수직 점을 클릭하여 "Chrome 사용자 지정 및 제어"^{(“Customize and control Google Chrome”)} 메뉴를 엽니다. 추가 도구를^{(More tools, )} 선택한 다음 개발자 도구^{(Developer Tools)} 를 선택합니다 .

^{(Access Developer Tools)}Google 크롬 에서 ^{(Google Chrome)}개발자 도구 에 액세스

"장치 도구 모음 전환"^{(“Toggle device toolbar”)} 버튼(태블릿 옆에 있는 스마트폰 모양)을 클릭하거나 탭 하거나 키보드에서 CTRL + Shift + M 을 누릅니다. 이렇게 하면 모바일 페이지가 로드되는 장치 도구 모음이 활성화됩니다. 기본적으로 장치 도구 모음은 로드한 사이트에 대해 반응형^(Responsive) 템플릿을 사용합니다. 그것을 클릭^(Click) 하고 에뮬레이션하려는 모바일 장치를 선택하십시오. 다양한 iPhone, iPad, Surface Duo , Samsung Galaxy 장치 2대, PC용 Moto G4 모바일^{(Moto G4 mobile)} 브라우저 시뮬레이터를 선택할 수 있습니다.

Chrome^{(Google Chrome)} 에서 모바일 브라우저 에뮬레이터를 활성화하는 방법

팁:^(TIP:) 불행히도 CTRL + Shift + M 키보드 단축키는 개발자 도구를 활성화한 후에만 사용할 수 있습니다.

테스트하려는 사이트를 탐색^(Navigate) 하고 다른 스마트폰과 태블릿 간에 전환하고 어떻게 보이는지 확인합니다. 완료되면 Chrome 개발자 도구의 오른쪽 상단 모서리에 있는 X(닫기) 버튼을 눌러 표준 데스크톱 브라우징 모드로 돌아갑니다.^{(X (Close))}

모바일 브라우저 에뮬레이터 Google Chrome 닫기^{(Google Chrome)}

팁: ^(TIP:)Google 크롬^{(Google Chrome)} 을 많이 사용하는 경우 Google 크롬의 미디어 제어 옵션을 사용하는 방법^{(how to use Google Chrome’s media control options)} 도 배울 수 있습니다 .

Mozilla Firefox 에서 모바일 브라우저 에뮬레이터를 켜고 사용하는 방법

Mozilla Firefox 에서 모바일 브라우저 시뮬레이터를 사용하려는 사이트를 엽니다. 그런 다음 키보드에서 CTRL + Shift + M 을 누르거나 오른쪽 상단 모서리에 있는 버거 버튼을 클릭하여 Firefox 메뉴를 열고 Web Developer 를 선택합니다 .

Firefox 에서 ^(Firefox)웹 개발자^{(Web Developer)} 도구에 액세스

웹 개발자에게 유용한 도구로 가득 찬 메뉴가 표시됩니다. 목록에서 "반응형 디자인 모드"^{(“Responsive Design Mode,”)} 를 선택 하면 웹 페이지를 보는 이 특정 모드가 Firefox 에 로드됩니다 .

Firefox 에서 반응형 디자인 모드^{(Responsive Design Mode)} 선택

Firefox는 반응형 디자인 모드^{(Responsive Design Mode)} 를 활성화합니다 . 창 상단에 이 에뮬레이션 모드에서 사용하는 매개변수가 표시됩니다. 장치를 선택하지 않은 경우 반응형^(Responsive) 을 클릭하거나 탭 하여 에뮬레이션에 사용할 수 있는 장치가 있는 드롭다운 목록을 연 다음 시뮬레이션할 장치를 선택합니다.

많은 iPhone, iPad, Kindle Fire ( Firefox 가 이 에뮬레이션 옵션을 제공하는 유일한 브라우저임) 및 Samsung Galaxy S9 장치의 모바일 브라우저를 시뮬레이션할 수 있습니다.

Firefox 에서 모바일 브라우저 에뮬레이터 사용

스마트폰 브라우저 에뮬레이터로 테스트를 마치면 Mozilla Firefox 의 오른쪽 상단 모서리에 있는 X(반응형 디자인 모드 닫기)^{(X (Close Responsive Design Mode))} 버튼을 누릅니다 .

Firefox 에서 모바일 브라우저 에뮬레이터 닫기

표준 데스크탑 브라우징 모드로 돌아갑니다.

Microsoft Edge 에서 모바일 브라우저 에뮬레이터를 켜고 사용하는 방법

Microsoft Edge 는 ^{(Microsoft Edge)}Google Chrome 과 동일한 렌더링 엔진을 사용하고 동일한 스마트폰 브라우저 에뮬레이터를 제공합니다. 액세스하려면 테스트하려는 웹 사이트를 방문하고 키보드에서 CTRL + SHIFT + I 키를 누르거나 Microsoft Edge 의 오른쪽 상단 모서리에 있는 세 개의 가로 점( "설정 등"^{(“Settings and more”)} )을 클릭합니다 . 표시되는 메뉴에서 추가 도구^{(More tools)} 로 이동 한 다음 개발자 도구^{(Developer Tools)} 로 이동합니다 .

Microsoft Edge 에서 ^{(Microsoft Edge)}개발자^(Developer) 도구에 액세스

"장치 에뮬레이션 전환"^{(“Toggle device emulation”)} 버튼(태블릿 옆에 있는 스마트폰 모양)을 클릭하거나 키보드 에서 CTRL + Shift + M 을 누릅니다. 그러면 모바일 브라우저 에뮬레이터 도구 모음이 활성화됩니다. 기본적으로 로드한 사이트에 대해 반응형^(Responsive) 템플릿을 사용합니다. 그것을 클릭^(Click) 하고 에뮬레이션하려는 모바일 장치를 선택하십시오. 옵션에는 Google 크롬^{(Google Chrome)} 과 동일한 스마트폰 및 태블릿이 포함됩니다 .

Microsoft Edge 에서 모바일 브라우저 에뮬레이터에 액세스

테스트하려는 사이트를 탐색하고 다른 모바일 장치 간에 변경하고 어떻게 보이는지 확인합니다. 완료되면 Microsoft Edge의 오른쪽 상단 모서리에 있는 X(닫기) 버튼을 누릅니다.^{(X (Close))}

Microsoft Edge 에서 모바일 브라우저 에뮬레이터 닫기

이제 표준 데스크탑 브라우징 모드로 돌아갑니다.

Opera 에서 모바일 브라우저 에뮬레이터를 켜고 사용하는 방법

Opera 에서 모바일 장치를 사용하는 것처럼 보고 싶은 웹 페이지를 방문하십시오. 그런 다음 왼쪽 상단 의 Opera 아이콘( ^(Opera)"Opera 사용자 지정 및 제어"^{(“Customize and control Opera”)} )을 클릭합니다. 열리는 메뉴에서 개발자를 선택한 다음^(Developer) 개발자 도구^{(Developer tools)} 를 선택합니다 . 키보드를 선호하는 경우 CTRL+Shift+I 키를 눌러 동일한 결과를 얻으십시오.

Opera에서 개발자 도구에 액세스

개발자 도구^{( Developer tools)} 는 브라우저 창의 오른쪽에 표시됩니다. "장치 도구 모음 전환"^{(“Toggle device toolbar”)} 버튼(태블릿 옆에 있는 스마트폰 모양)을 클릭하거나 키보드 에서 CTRL + Shift + M 을 누릅니다. 장치 도구 모음이 왼쪽에 표시됩니다. 기본적으로 로드한 사이트에 대해 반응형^(Responsive) 템플릿을 사용합니다. 그것을 클릭^(Click) 하고 옵션 목록에서 에뮬레이트하려는 모바일 장치를 선택하십시오. Opera는 동일한 렌더링 엔진( Chromium ) 을 기반으로 하므로 Google Chrome 및 Microsoft Edge 와 동일한 모바일 브라우저 에뮬레이터를 제공합니다 .

Opera 에서 모바일 브라우저 에뮬레이터에 액세스

테스트가 끝나면 오른쪽 상단 모서리에 있는 X( 닫기 ) 버튼을 눌러 표준 데스크탑 브라우징 모드로 돌아갑니다.^(Close)

Opera 에서 모바일 브라우저 에뮬레이터 닫기

사용 가능한 모바일 브라우저 에뮬레이션 옵션에 만족 하십니까^(Are) ?

이제 즐겨 사용하는 웹 브라우저에서 모든 종류의 모바일 장치를 에뮬레이트하는 방법을 알게 되었습니다. 그러나 대부분의 웹 브라우저는 iPhone 및 iPad를 선호하는 동일한 에뮬레이션 옵션을 제공합니다. 최신 Android^(Android) 스마트폰이나 태블릿 을 에뮬레이트하려는 경우 Android 뒤에 있는 회사에서 개발한 브라우저 인 Google Chrome 에서도 가능성이 매우 희박 합니다. 최상의 결과를 얻으려면 이 작업에 두 가지 브라우저( Chrome^(Chrome) 및 Firefox 또는 Firefox 및 Edge 또는 Opera ) 를 사용해야 할 수 있습니다 . 가기 전에 사용 가능한 옵션에 대해 어떻게 생각하는지 알려주십시오.

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera -

Do you need to access a smartphone browser emulator оn your PC tо test the mobіle version of a website you are interested in? Maybe you are a web developer, or you want to beсome оne, and you need to ѕimulate a mobile browser for the project yоu are working on. Regardless of your reasons, here is how to access a mobile browser emulator in Google Chrome, Mozilla Firefox, Microsoft Edge, and Opera:

How to turn on and use the mobile browser emulator in Google Chrome

In Google Chrome, navigate to the website that you want to view in the mobile browser emulator. Then, either press the CTRL + SHIFT + I keys on your keyboard or, with the mouse, click the three vertical dots in the top-right corner to open the “Customize and control Google Chrome” menu. Choose More tools, followed by Developer Tools.

Access Developer Tools in Google Chrome

Click or tap on the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the device toolbar where the mobile page is loaded. By default, the device toolbar uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include many iPhones, iPads, Surface Duo, two Samsung Galaxy devices, and a Moto G4 mobile browser simulator for PC.

How to enable the mobile browser emulator in Google Chrome

TIP: Unfortunately, you can use the CTRL + Shift + M keyboard shortcut only after enabling the developer tools.

Navigate the site you want to test, switch between the different smartphones and tablets, and see how it looks. When you are done, press the X (Close) button in the top-right corner of Google Chrome’s developer tools to get back to the standard desktop browsing mode.

Closing the mobile browser emulator Google Chrome

TIP: If you are a heavy Google Chrome user, you may also want to learn how to use Google Chrome’s media control options.

How to turn on and use the mobile browser emulator in Mozilla Firefox

In Mozilla Firefox, open the site for which you want to use a mobile browser simulator. Then, either press CTRL + Shift + M on your keyboard or click the burger button on the top-right corner to open Firefox’s menu, and choose Web Developer.

Access the Web Developer tools in Firefox

You see a menu filled with tools that are useful to web developers. In the list, select “Responsive Design Mode,” and this particular mode of viewing a web page is loaded in Firefox.

Choose the Responsive Design Mode in Firefox

Firefox enables the Responsive Design Mode. At the top of the window, you see the parameters used by this emulation mode. If no device is selected, click or tap on Responsive to open a drop-down list with devices available for emulation, and then choose the one that you want to simulate.

You can simulate the mobile browser for many iPhones, the iPad, the Kindle Fire (Firefox is the only browser to offer this emulation option), and Samsung Galaxy S9 devices.

Use the mobile browser emulator in Firefox

When you’re done testing with the smartphone browser emulator, press the X (Close Responsive Design Mode) button on the top-right corner of Mozilla Firefox.

Close the mobile browser emulator in Firefox

You are back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Microsoft Edge

Microsoft Edge uses the same rendering engine as Google Chrome and offers the same smartphone browser emulators. To access them, visit the website that you want to test, and either press the CTRL + SHIFT + I keys on your keyboard or click the three horizontal dots (“Settings and more”) in the top-right corner of Microsoft Edge. In the menu that appears, go to More tools and then to Developer Tools.

Access the Developer tools in Microsoft Edge

Click the “Toggle device emulation” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the mobile browser emulator toolbar. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include the same smartphones and tablets as Google Chrome.

Access the mobile browser emulator in Microsoft Edge

Browse the site you want to test, change between the different mobile devices, and see how it looks. When you are done, press the X (Close) button in Microsoft Edge’s top-right corner.

Close the mobile browser emulator in Microsoft Edge

You are now back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Opera

In Opera, visit the web page that you want to view as if you were using a mobile device. Then click the Opera icon on the top-left (“Customize and control Opera”). In the menu that opens, choose Developer followed by Developer tools. If you prefer the keyboard, press the CTRL+Shift+I keys for the same result.

Access the Developer tools in Opera

The Developer tools are displayed on the right side of the browser window. Click the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. The device toolbar is shown on the left. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate from the list of options. Opera offers the same mobile browser emulators as Google Chrome and Microsoft Edge, as it is based on the same rendering engine (Chromium).

Access the mobile browser emulator in Opera

When you are done testing, press the X (Close) button in the top-right corner to get back to the standard desktop browsing mode.

Close the mobile browser emulator in Opera

Are you happy with the mobile browser emulation options available?

Now you know how to emulate all kinds of mobile devices in your favorite web browser. However, you might notice that most web browsers offer the same emulation options that favor iPhones and iPads. If you want to emulate a modern Android smartphone or tablet, your chances are pretty slim, even in Google Chrome - the browser developed by the company behind Android. If you want the best results, you might need to use two browsers for this task: Chrome and Firefox, or Firefox and Edge or Opera. Before you go, tell us what you think about the available options.

Related posts

• Chrome, Firefox, Microsoft Edge 및 Opera에 탭을 음소거하는 방법

• 모든 주요 브라우저에서 광고없이 기사를 인쇄하는 방법

• Windows 10에서 웹 사이트를 작업 표시 줄이나 Start Menu에 고정하는 방법

• Chrome Windows 10에서 default browser을 만드는 방법 (Firefox & Opera)

• Windows 11에서 default browser을 변경하는 방법

• Chrome, Firefox, Edge 및 Opera에서 제 3 자 쿠키를 차단하는 방법

• 2021에서 최고 10 Microsoft Edge 부가 기능

• Chrome 64비트 또는 Chrome 32비트: Windows 10 또는 이전 버전의 경우 원하는 버전을 다운로드합니다.

• Chrome, Edge, Firefox 및 Opera에서 shortcut key Go incognito

• Microsoft Edge를 다른 것보다 더 나쁜 웹 브라우저로 만드는 5가지 문제

• Microsoft Edge download 위치를 변경하는 방법

• Firefox에서 Flash을 활성화하는 방법

• 모든 주요 브라우저에 대해 Windows 10에 저장된 쿠키는 어디에 있습니까?

• Make InPrivate or Incognito shortcuts Firefox, Chrome, Edge, Opera 또는 Internet Explorer

• Chrome을 멈추는 방법 암호 저장을 묻는 것입니다

• Put Chrome 전체 화면의 다른 브라우저 (Edge, Firefox 및 Opera)

• Chrome 알림을 해제하는 방법 : 알아야 할 모든 것

• 브라우저가 개인 브라우징을 개선해야 하는 7가지 방법(Incognito, InPrivate 등)

• Microsoft Edge에서 탭을 관리하는 12 가지 방법

• 모든 주요 웹 브라우저에서 Java를 활성화하는 방법