[Chrome] Visual Inspector by CanvasFlip


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


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

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


...




...




Posted by 홍반장水 홍반장水

[Web] DevTools의 새로운 기능 (Chrome 60)


https://developers.google.com/web/updates/2017/05/devtools-release-notes







...

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

Remote Debugging on Android with Chrome

https://developer.chrome.com/devtools/docs/remote-debugging



1. 안드로이드 폰 : 환경설정 > 개발자모드 선택 후  "USB Debugging" 모드 선택해야함.


2. PC 크롬 브라우저에  chrome://inspect.  입력.


3. PC 와 안드로이드폰을 USB로 연결.


4. PC 크롬 브라우저에 연결된 핸드폰 정보가 나온다. 브라우저에서 "inspect" 를 선택하면

   안드로이드폰에서 접속한 크롬 브라우저의 내용이 나온다.

   - 안드로이드폰의 크롬브라우저를 PC에서 보는 기능 구현.


=================================================================================

The way your web content behaves on mobile can be dramatically different from the desktop experience. Remote debugging with Chrome DevTools lets you debug live content on your Android device from your development machine.

Debugging Chrome for Android using the Chrome Developer Tools

Remote debugging on Android supports:

To begin remote debugging, you need:

  • Chrome 32 or later installed on your development machine.
  • A USB cable to connect your Android device.
  • For browser debugging: Android 4.0+ and Chrome for Android.
  • For app debugging: Android 4.4+ and a WebView configured for debugging.

Note: Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. For best results, use Chrome Canary(Mac/Windows) or the Chrome Dev channel release (Linux) on desktop.

If at any time you encounter problems with remote debugging, refer to the Troubleshooting section.

Follow these instructions to set up your Android device for remote debugging.

On your Android device, select Settings > Developer options.

developer options
Developer options on the Settings page.
Note: On Android 4.2 and later, the developer options are hidden by default. To enable the developer options, select Settings > About phone and tap Build number seven times.
About phone screen
Enabling the developer options on Android 4.2+.

In Developer options, select the USB debugging checkbox:

USB debugging settings in Developer options
Enabling USB debugging on Android.

An alert prompts you to allow USB debugging. Tap OK.

allow USB debugging message

Connect the Android device to your development machine using a USB cable.

Note: If you are developing on Windows, install the appropriate USB driver for your device. See OEM USB Drivers on the Android Developers' site.

After setting up remote debugging on Android, discover your device in Chrome.

On your desktop Chrome browser, navigate to chrome://inspect. Confirm that Discover USB devices is checked:

Discover USB Devices in chrome://inspect
Tip: You can also get to chrome://inspect by selecting Chrome menu > More tools > Inspect Devices.

On your device, an alert prompts you to allow USB debugging from your computer. Tap OK.

USB debugging permission alert
Tip: To skip this alert in the future, check Always allow from this computer.

The message USB debugging connected displays in the device's notification drawer.

Note: During remote debugging, Chrome prevents your device’s screen from going to sleep. This feature is useful for debugging, but is also less secure. So be sure to keep an eye on your device!

On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.

The chrome://inspect page.
Viewing connected devices from the chrome://inspect page.

If you have problems finding your device on the chrome://inspect page, see the Troubleshooting section.

From the chrome://inspect page, you can launch DevTools and debug your remote browser tabs.

To start debugging, click inspect below the browser tab you want to debug.

Click inspect to start remote debugging

A new instance of Chrome DevTools launches on your computer. From this instance, you can interact with the selected browser tab on your device in real time.

Debugging Chrome for Android using the Chrome Developer Tools
Debug a web page on your Android phone from your laptop using Chrome DevTools.

For example, you can use DevTools to inspect web page elements on your device:

  • When you mouse over an element in the Elements panel, DevTools highlights the element on your device.
  • You can also click the Inspect Element inspect element icon icon in DevTools and tap your device screen. DevTools highlights the tapped element in the Elements panel.

Note: The version of Chrome on your device determines the version of DevTools used during remote debugging. For this reason, the remote debugging DevTools might differ from the version that you normally use.

Here are a few tips to help get you started with remote debugging:

  • Use F5 (or Cmd+r on Mac) to reload a remote page from the DevTools window.
  • Keep the device on a cellular network. Use the Network panel to view the network waterfall under actual mobile conditions.
  • Use the Timeline panel to analyze rendering and CPU usage. Hardware on mobile devices often runs much slower than on your development machine.
  • If you’re running a local web server, use port forwarding or virtual host mapping to access the site on your device.

On Android 4.4 (KitKat) or later, you can use DevTools to debug WebView content in native Android applications.

WebView debugging must be enabled from within your application. To enable WebView debugging, call the static method setWebContentsDebuggingEnabled on the WebView class.

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      WebView.setWebContentsDebuggingEnabled(true);
  }

This setting applies to all of the application's WebViews.

Tip: WebView debugging is not affected by the state of the debuggable flag in the application's manifest. If you want to enable WebView debugging only when debuggable is true, test the flag at runtime.

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
  }

The chrome://inspect page displays a list of debug-enabled WebViews on your device.

To start debugging, click inspect below the WebView you want to debug. Use DevTools as you would for aremote browser tab.

Inspecting elements in a WebView
Debugging a remote Android WebView with the Chrome DevTools.

The gray graphics listed with the WebView represent its size and position relative to the device's screen. If your WebViews have titles set, the titles are listed as well.

Shifting your attention between screens isn’t always convenient. Screencast displays your device's screen right alongside DevTools on your development machine. You can interact with the content on your device from the screencast too.

As of KitKat 4.4.3, screencast is available for both browser tabs and Android WebViews.

To start screencasting, click the Screencast screencast icon icon in the upper right corner of your remote debugging DevTools window.

screencast location in DevTools
The Screencast icon.

The Screencast panel opens on the left and displays a live view of your device's screen.

Open a new remote tab.
Live interactive screencast from your Android to your laptop.

Screencast only displays page content. Transparent portions of the screencast are covered by the omnibox, device keyboard, and other device interfaces.

Note: Because screencast continuously captures frames, it has some performance overhead. If your tests are sensitive to frame rate, disable screencast.

When you interact with the screencast, clicks are translated into taps, firing proper touch events on the device. Keystrokes from your computer are sent to the device, so you can avoid typing with your thumbs.

Other DevTools work with the screencast too. For example, to inspect an element, click the Inspect Element inspect element icon icon and then click inside the screencast.

Tips: To simulate a pinch gesture, hold Shift while dragging. To scroll, use your trackpad or mouse wheel or fling with your pointer.

Your phone can't always reach the content on your development server. They might be on different networks. Moreover, you might be developing on a restricted corporate network.

Port forwarding on Chrome for Android makes it easy to test your development site on mobile. It works by creating a listening TCP port on your mobile device that maps to a particular TCP port on your development machine. Traffic between these ports travels through USB, so the connection doesn't depend on your network configuration.

To enable port forwarding:

  1. Open chrome://inspect on your development machine.
  2. Click Port Forwarding. The port forwarding settings display.
    port forwarding button location
  3. In the Device port field, enter the port number you want your Android device to listen on. 
    (The default port is 8080.)
  4. In the Host field, enter the IP address (or hostname) and port number where your web application is running. 
    This address can be any local location accessible from your development machine. Currently, port numbers must be between 1024 and 32767 (inclusive).
  5. Check Enable port forwarding.
  6. Click Done.
    port forwarding dialog
    The port forwarding settings.

The port status indicators on chrome://inspect are green when port forwarding is successful.

viewing local content on mobile
Viewing the content of your local web server on Android using port forwarding.

Now you can open a new Chrome for Android tab and view the content of your local server on your device.

Port forwarding works great when you're developing on localhost. But there are cases when you might be using a customized local domain.

For example, suppose you're using a third party JavaScript SDK that only works on whitelisted domains. So you added an entry, such as 127.0.0.1 production.com, to your hosts file. Or maybe you configured a customized domain using virtual hosts on your web server (MAMP).

If you want your phone to reach content on your customized domain, you can use port forwarding in combination with a proxy server. The proxy maps requests from your device to the correct location on the host machine.

Virtual host mapping requires you to run a proxy server on the host machine. All requests from your Android device will be forwarded to the proxy.

To set up port forwarding to a proxy:

  1. On the host machine, install proxy software such as Charles Proxy (free trial available) or Squid.
  2. Run the proxy server and note the port that it's using.

    Note: The proxy server and your development server must be running on different ports.

  3. In a Chrome browser, navigate to chrome://inspect.
  4. Click Port forwarding. The port forwarding settings display.
    port forwarding button location
  5. In the Device port field, enter the port number that you want your Android device to listen on. 
    Use a port that Android allows, such as 9000.
  6. In the Host field, enter localhost:xxxx, where xxxx is the port your proxy is running on.
  7. Check Enable port forwarding.
  8. Click Done.
    port forwarding dialog
    Port forwarding to a proxy.

The proxy on the host machine is set up to make requests on behalf of your Android device.

Your Android device needs to communicate with the proxy on the host machine.

To configure the proxy settings on your device:

  1. Select Settings > Wi-Fi.
  2. Long-press the network that you are currently connected to.

    Note: Proxy settings apply per network.

  3. Tap Modify network.
  4. Select Advanced options. 
    The proxy settings display.
    phone proxy settings
    Proxy settings on the device.
  5. Tap the Proxy menu and select Manual.
  6. In the Proxy hostname field, enter localhost.
  7. In the Proxy port field, enter 9000.
  8. Tap Save.

With these settings, your device forwards all of its requests to the proxy on the host machine. The proxy makes requests on behalf of your device, so requests to your customized local domain are properly resolved.

Now you can load local domains on Chrome for Android just as you would on the host machine.

virtual host mapping
Using virtual host mapping to access a customized local domain from an Android device.

Tip: To resume normal browsing, remember to revert the proxy settings on your device after you disconnect from the host.

  • If you are developing on Windows, verify that the appropriate USB driver for your device is installed. SeeOEM USB Drivers on the Android Developers' site.
  • Verify that the device is connected directly to your machine, bypassing any hubs.
  • Verify that USB debugging is enabled on your device. Remember to accept the USB debugging permission alerts on your device.
  • On your desktop browser, navigate to chrome://inspect and verify that Discover USB devices is checked.
  • Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. Try using Chrome Canary (Mac/Windows) or the Chrome Dev channel release (Linux) on desktop.

If you still can't see your device, unplug it. On your device, select Settings > Developer options. Tap Revoke USB debugging authorizations. Then, retry the device setup and discovery processes.

  • On your device, open the Chrome browser and navigate to the web page you want to debug. Then, refresh the chrome://inspect page.
  • Verify that WebView debugging is enabled for your app.
  • On your device, open the app with the WebView you want to debug. Then, refresh the chrome://inspectpage.

Lastly, if remote debugging still isn't working, you can revert to the legacy workflow using the adb binary from the Android SDK.

You no longer need to configure ADB or the ADB plugin to debug remote browser tabs and WebViews. Remote debugging for Android is now part of the standard Chrome DevTools. It works on all operating systems: Windows, Mac, Linux, and Chrome OS.

If you do encounter problems with remote debugging, you can try the legacy workflow using the adb binary from the Android SDK.

Note: The direct USB connection between Chrome and the device might interrupt youradb connection. Before establishing your adb connection, uncheck Discover USB deviceson chrome://inspect. Then, disconnect and reconnect the device.

For information about the remote debugging interaction protocol, refer to the Debugger Protocoldocumentation and chrome.debugger.



'Extreming X > Architect' 카테고리의 다른 글

[클라우드] IaaS, PaaS, SaaS란 무엇인가.  (0) 2015.11.09
머신러닝의 미래  (0) 2015.10.15
[Chrome] remote - Debugging  (0) 2015.09.22
엑셀 하이퍼링크 함수  (0) 2015.09.01
모바일 기획  (0) 2015.08.14
아이패드 , 윈도우와 Airplay 하기.  (0) 2015.04.27
Posted by 홍반장水 홍반장水
[Chrome] 크롬 확장 프로그램 - DotVPN 외부 IP로 사이트 접속하는 프로그램

 

 

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

 

 

 

 

Posted by 홍반장水 홍반장水
TAG Chrome, 크롬

CHROME ADD-INS/EXTENSIONS

"Tomorrow is 11/11/11, not 11/11/11. Bloody Americans." - Laurentme0w

 

Posted by 홍반장水 홍반장水

Clockwork: A Chrome PHP devtools panel

clockwork

Posted by 홍반장水 홍반장水
TAG Chrome, php

20 Useful Chrome Extensions for Developers

 

Google chrome is one of the most popular, fastest and widely used browser amongst internet users. Google chrome not only enables users to browse web pages quickly but also provides rich user experience. Google chrome has something special for every type of users whether they are bloggers, developers or gamers. Chrome enhances its usability by providing outstanding extensions, plugins and add-ons. No doubt Firefox has more reliable and loyal users and completion is tough between these two internet giants but if you are still not ready to leave Firefox yet, make sure you give a chance to chrome with outstanding chrome extensions.

In this article I have gathered 20 Useful Chrome Extensions for Developers that are special hand-picked and definitely help developers for their development related tasks. I hope you will find the list handy and following chrome extensions would be helpful for you to handle complex projects. Enjoy.

1. BuiltWith

build-with
The BuiltWith Chrome Extension lets you find out what a website is built with by a simple click on the builtwith icon!
BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

Source

2. Codenvy IDE

Codenvy IDE
Codenvy is a cloud IDE enables you to code, build, debug in the cloud, and deploy to your PaaS of choice. Teams can collaboratively build SDKs, APIs, Web apps and mobile apps with Codenvy. We support HTML5/JavaScript, Java, Node.JS, Android, Spring, PHP, Ruby and Python. Because you can deploy directly to a PaaS environment, migrating from development to staging and deployment takes just a few clicks. The environment is collaborative and workspaces can be screen shared like WebEx, collaborative like Google Docs, and forked like GitHub.

Source

3. Postman Rest Client

Postman-–-REST-Client
Postman helps you be more efficient while working with APIs. Postman is a scratch-your-own-itch project. The need for it arose while one of the developers was creating an API for his project. After looking around for a number of tools, nothing felt just right. The primary features added initially were a history of sent requests and collections.

Source

4. JSON Editor

json-editor
JSON Editor is a tool to view, edit, and format JSON. It shows your data in an editable treeview and in a code editor. It features view and edit JSON side by side in treeview and a code editor, Edit, add, move, remove, and duplicate fields and values, change type of values, sort arrays and objects, colorized values, color depends of the value type.

Source

5. Coding the Web

coding-the-web
Most of us learning HTML feel lazy to write code and save it and then run it. when it comes to CSS and JavaScript it becomes too tedious a task to handle..the solution is this application…Its made to make u even lazier by displaying a preview of your html code by the click of a button. just write your html,css and JavaScript code in the corresponding tabs on left side and see a preview of your code on right side by clicking Preview Button..

Source

6. Web Developer

web-developers
The Web Developer extension adds a toolbar button to the browser with various web developer tools.

Source

7. Firebug Lite

Firebug-Lite
Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elements with your mouse, and live editing CSS properties.

Source

8. Clear Cache

Clear-Cache
Clear Cache lets you quickly clear your cache without any confirmation dialogs, pop-ups or other annoyances.
You can customize what and how much of your data you want to clear on the options page, including: App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords and WebSQL.

Source

9. Handcraft

handcraft
Handcraft is a web-based prototyping tool for interaction designers and front-end developers. The design process doesn’t end with a wireframe or mockup. Bring your design into the browser and use HTML, CSS and Javascript to handcraft interactive prototypes that get sign off faster.

Source

10. Dimensions

dimension
Dimensions is a responsive web design testing tool. It is the easiest way to test responsive websites at different viewports. It works offline & is compatible with LiveReload.

Source

11. GistBox

gistbox
GistBox is the best interface to Github Gists. Organize your snippets with labels. Edit your code. Search by description. All in one speedy app.

Source

12. Resolution Test

Resolution-Test

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customize that list. It also gives users the option to turn on Google Browser Size,

Source

13. CSS Shack

css-shack

CSS-Shack allows you to create Layers Styles (just like you would in any other image editing software), and export them into a single CSS file, or copy them to the clipboard.

Source

14. Codev

codev
codev.it is the best designed online code-editor with built-in SQLite editor, Compiler, Time Tracker, Automatic Backup.

Source

15. Pendule

Pendule
Pendule is extended web developer tool for chrome which helps developers with style sheets, forms, JavaScript, images, CSS, browser sizes, and many more.

Source

16. Koding

koding
Koding is an Online Development Environment including Code Editor, Cloud Hosting, Database Administration, and Collaboration with access to a Web-based file system and FTP & SVN integration. Kdigen is enriched with numerous number of features such as free developer accounts, lets you connect to your own FTP servers, shell access to your files and also online coding support for various languages such as php, peral, python and many more.

Source

17. MyQuery Builder

My-Query-Builder
MyQuery Builder is a browser-based MySQL query editor for PHP web developers that makes building MySQL queries easy. MyQuery Builder is an integral part of a web developer’s workflow. MQB lets you build MySQL queries visually with drag-and-drop ease, deconstruct your existing MySQL queries and open them in the visual SELECT Query Builder, convert MySQL queries you create to site-ready PHP code, upgrade your existing PHP MySQL code from older standards to new, and generally offer a drag-and-drop approach to what has typically been the realm of arcane tools or hard to use wizards.

Source

18. Google Apps Script

Google Apps Script
Google Apps Script is a JavaScript cloud scripting language that provides easy ways to automate tasks across Google products and third party services and build web applications

Source

19. Cookies

Cookies
Cookies is a free, powerful and easy-to-use Visual Cookie Editor. Cookies helps you more effectively manage all cookies stored within your browser, including 3rd party cookies. The interface is clean and well organized.

Source

20. Shift Edit

shfit-edit
ShiftEdit is an online PHP, Ruby, Java, HTML, CSS and JavaScript editor with built-in (S)FTP and Dropbox. Ideal for web development.

Source

Posted by 홍반장水 홍반장水

카운터 Strike 온라인  Game

Link : https://chrome.google.com/webstore/detail/counter-strike-online/cadippdoonnecjfembbfokijpncaiefh

 

 

BeGone - Browser based online multi-player first/third person shooter.

 

link : https://chrome.google.com/webstore/detail/begone/ndfpieflbjbdpgklkeolbmbdkfdiicfk

 

 

BeGone (© NPlay.com) - browser based online multiplayer first/third person shooter with realistic themes and beautifully rendered maps. Players can choose to join teams and face off against each other with modern weapons. Both teams will try to eliminate the opposing team before the time runs out. BeGone allows for players to utilize map locations strategically and develop their own tactics. This game features unique
weapon attachment setups, a cash-based virtual economy, a robust clan system, hot key customization and full screen support. It delivers an immersive FPS gaming experience and you can get all that BeGone has to offer completely free. BeGone is quickly accessible from your browser and no signup is required. 

 

 

 

 

 

Posted by 홍반장水 홍반장水
TAG Chrome, FPS, game

Chrome Logger — Server side app debugging in Chrome

chrome logger

 

 

Chrome 웹 스토어 : https://chrome.google.com/webstore/detail/chrome-logger/noaneddfkdjfnfdakjjmocngnfkfehhd

 

 

 

Posted by 홍반장水 홍반장水