- To use the browser sync feature you must have the chrome extension installed. Once installed you must select the same sign in method (Email or Google) as chosen within the android application.
- Once signed in on both the android and chrome application you are ready to start syncing. In your chrome toolbar you will see the WebTools icon Figure 1.0, click it to activate syncing. Once activated the icon will turn orange.
- Once signed in you will be taken to the URL replacement page(Figure 1.1) if you want to sync a page from localhost then enter the URL (your computers IP address) into the 'with' input area.
ifconfig | grep inet
Regex Custom Keys
- You can add your own custom regex shortcut keys. Simply long click on any of the buttons.(Figure 2.0)
- This will open a dialog with the text "Create Custom Shortcut" at the top (Figure 2.1). Click this option to enter your own shortcut.
- If you do not want to create your own shorcut there are already many predefined shortcuts available.
Using the Color Picker
- To use the color picker you need to select an image from your gallery or you can use the camera. To get started select one of the options in the actionbar. (Figure 3.0)
- Once you have selected your image it will be displayed on screen. From here you can zoom and pan the image. Once you are happy with your selection lock the image from the actionbar as shown in Figure 3.1.
- Once you have locked the image the color picker circle will appear. Move the color picker circle around to select your color from the image. A color palette is also generated based on the colors from the image.
- To view source code you must enter in the web site/pages URL. Note that if you enter just google.com you may be redirected to your countries google page for example -- in Ireland it will redirect to google.ie. To ensure this does not happen enter the full URL -- https://google.com. Once the URL is entered view the source by clicking the button highlighted in Figure 4.0.
- The options menu contains a lot Figure 4.1. You can search for lines in the source code, validate the pages links and HTML (w3), save the source code to a file, bookmark the URL (Saved in "Saved URLs"), open the URL in a browser, share the source code, copy the source code and show the response and request headers.
- To understand each heading in the rankings tab there is a help button beside each heading as shown in Figure 5.0. By clicking this button you will get a description of each heading/sub-heading. The rankings are pulled from the Alexa web site.
- You can bookmark URLs from the SEO Tools section, simply click the menu overflow icon (3 dots) as shown in Figure 5.1.
question_answers Can I use browser sync on localhost?
Yes you can. See the browser sync help option.
question_answers How can I use the regex replacement option?
First you must enable the replacement option from the overflow menu icon in the actionbar.
Take the regular expression:
^([0-1][0-9]|[0-3]):([0-5][0-9])$- This simple regular expression matches the time in 24 hour format. It has two groups denoted by the brackets. We can reference the first group using
$1and the second group using
$2and so on. If we have a test data 10:20 and we write the replacemnt expression as
$2:$1the result will be 20:10.
question_answers In the color picker why does the palette change when I pan and zoom to other parts of the image?
It has been coded this way so that the palette is generated based on the colors currently in the view finder and not the image as a whole.
question_answers Can I change the user agent for browser sync?
Currently you can only switch between mobile and desktop. I may add other user agents and custom user agents in future updates. This also goes for the source viewer.
question_answers Can I change the theme of the syntax highlighter?
Not yet, I do plan on adding different themes in a future update.