Skip to content
This repository was archived by the owner on May 1, 2020. It is now read-only.

Commit d9bf142

Browse files
committed
Updated advanced-page-follow page
This is part of pattern-lab/patternlab-node#70 for version 1.0.0 release prep
1 parent ed77a63 commit d9bf142

File tree

1 file changed

+66
-1
lines changed

1 file changed

+66
-1
lines changed

patternlabsite/docs/advanced-page-follow.md

+66-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,17 @@
22
layout: docs
33
title: Multi browser & Multi device Testing with Page Follow | Pattern Lab
44
heading: Multi browser & Multi device Testing with Page Follow
5+
languages:
6+
- language: php
7+
- language: node
58
---
69

10+
<!--- start php -->
11+
12+
<div class="tab-panel" id="php">
13+
<h2 class="language-title">php</h2>
14+
15+
{% capture m %}
716

817
The PHP version of Pattern Lab's Page Follow feature gives developers the ability to have one browser control other browsers that connect to the Pattern Lab website. When a browser first connects to the Pattern Lab website they'll be redirected to the last visited pattern. Navigating to a new pattern will update all connected browsers. This should be especially useful when testing patterns across multiple devices.
918

@@ -29,4 +38,60 @@ To stop the service on Mac OS X you can press CTRL+C in the Terminal window wher
2938

3039
There is a [separate article on this topic](/docs/pattern-mobile-view.html).
3140

32-
**Important:** If you find that page follow is not working properly please make sure your browser [supports WebSockets](http://caniuse.com/websockets).
41+
**Important:** If you find that page follow is not working properly please make sure your browser [supports WebSockets](http://caniuse.com/websockets).
42+
43+
{% endcapture %}
44+
{{ m | markdownify }}
45+
46+
</div>
47+
48+
<!--- end php -->
49+
50+
51+
<!--- start node -->
52+
53+
<div class="tab-panel" id="node">
54+
<h2 class="language-title">node</h2>
55+
56+
{% capture m %}
57+
58+
The Node version of Pattern Lab's Page Follow feature gives developers the ability to have one browser control other browsers that connect to the Pattern Lab website. Pattern Lab Node utilizes [BrowserSync](http://www.browsersync.io/) to synchronize all connected browsers and devices.
59+
60+
## How to Start and Connect to Pattern Lab with BrowserSync
61+
62+
Running 'grunt serve' or 'gulp serve' from the command line of your working directory will start up Pattern Lab Node with BrowserSync. By default, BrowserSync will output four URLs of note:
63+
64+
1. Local: [http://localhost:3000](http://localhost:3000)
65+
2. External: http://your.ip.address:3000
66+
3. UI: [http://localhost:3001](http://localhost:3001)
67+
4. UI External: http://your.ip.address:3001
68+
69+
Any browsers on your machine will be able to hit the localhost URLs. Browsers on other machines or devices should use the external URLs. Connecting to the Pattern Lab website will inform users they are also connected to BrowserSync.
70+
71+
## How to Stop the Page Follow
72+
73+
To stop watching files on Mac OS X and Windows you can press`CTRL+C` in the command line window where the process is running.
74+
75+
## BrowserSync Capabilities
76+
77+
It's strongly recommended to visit [BrowserSync](http://www.browsersync.io/) documentation or the BrowserSync UI at [http://localhost:3001](http://localhost:3001). From this administration interface one can perform the following:
78+
79+
* See all connected devices and browsers
80+
* Open new tabbed instances of the Pattern Lab website on devices
81+
* Sync all connected devices
82+
* Reload all connected devices
83+
* Scroll all connected devices to the top
84+
* Toggle mouse click synchronization
85+
* Toggle scroll synchronization
86+
* Toggle form submission synchronization
87+
* Toggle form input synchronization
88+
* View browsing history of the connect session
89+
* Toggle remote debugging tools
90+
* Artificially throttle the network
91+
92+
{% endcapture %}
93+
{{ m | markdownify }}
94+
95+
</div>
96+
97+
<!--- end node -->

0 commit comments

Comments
 (0)