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.

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.

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, useChrome Canary(Mac/Windows) or the ChromeDev channelrelease (Linux) on desktop.

If at any time you encounter problems with remote debugging, refer to theTroubleshootingsection.

Setting up your Android device

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

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

When you mouse over an element in theElementspanel, DevTools highlights the element on your device.

You can also click theInspect Elementicon in DevTools and tap your device screen. DevTools highlights the tapped element in theElementspanel.

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.

Debugging tips

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

UseF5(orCmd+ron Mac) to reload a remote page from the DevTools window.

Keep the device on a cellular network. Use theNetworkpanelto view the network waterfall under actual mobile conditions.

Use theTimelinepanelto analyze rendering and CPU usage. Hardware on mobile devices often runs much slower than on your development machine.

Open a WebView in DevTools

Thechrome://inspectpage displays a list of debug-enabled WebViews on your device.

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

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.

Live screencasting

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.

Start a screencast session

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

TheScreencasticon.

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

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.

Interact with your device using the 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 theInspect Elementicon and then click inside the screencast.

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

Port forwarding

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:

Openchrome://inspecton your development machine.

ClickPort Forwarding. The port forwarding settings display.

In theDevice portfield, enter the port number you want your Android device to listen on.(The default port is 8080.)

In theHostfield, 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).

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.

Virtual host mapping

Port forwarding works great when you're developing onlocalhost. 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 as127.0.0.1 production.com, to yourhosts 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.

Set up port forwarding to a proxy

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.

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.

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.

Troubleshooting

I can't see my device on thechrome://inspect page.

If you are developing onWindows, verify that the appropriate USB driver for your device is installed. SeeOEM USB Driverson the Android Developers' site.

Verify that the device is connected directly to your machine, bypassing any hubs.

Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. Try usingChrome Canary(Mac/Windows) or the ChromeDev channelrelease (Linux) on desktop.

I can't access my web server from my Android device.

Lastly, if remote debugging still isn't working, you can revert to thelegacy workflowusing theadbbinary from the Android SDK.

Additional information

Remote debugging and ADB

You no longer need to configureADBor 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 thelegacy workflowusing theadbbinary from the Android SDK.

Clockwork: A Chrome PHP devtools panel

If you develop PHP and use Chrome, then check out the Clockwork Chrome extension. It provides a new panel with all kinds of useful debugging and profiling information, including info on GET and POST data, cookies, request, headers, session data, and much more.

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

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.

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

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

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

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

6. Web Developer

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

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

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

11. GistBox

12. 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,

15. Pendule

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

17. MyQuery 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.

18. Google Apps Script

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

Chrome Logger — Server side app debugging in Chrome

Chrome Logger, formerly known as ChromePHP, is a Chrome extension for debugging your server-side applications in the Chrome console. Setup is quick and easy, with language libraries for Python, PHP, Ruby, Node.js, .NET, and ColdFusion.