{"id":20029,"date":"2014-05-15T15:01:38","date_gmt":"2014-05-15T07:01:38","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=20029"},"modified":"2024-06-28T01:35:47","modified_gmt":"2024-06-27T17:35:47","slug":"sychronised-testing-with-ghostlab","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/","title":{"rendered":"How to Perform Synchronized Testing Using Ghostlab"},"content":{"rendered":"

In the previous post, we showed you how to perform synchronized testing<\/a> using Browser Sync<\/a>. As you might have seen, \u201csynchronized testing\u201d can greatly enhance your development workflow by testing mobile-optimized websites across multiple browsers and devices simultaneously.<\/p>\n

Interactions within the browsers, such as refreshing, clicking, and filling out forms, are reflected across the browsers and connected devices in real-time<\/strong>.<\/p>\n

However, everyone has their own working styles. Some people prefer using Command Line, while others prefer using an application with a graphical interface<\/strong> because it is more intuitive for them. In this post, we will show you an alternative for synchronized testing using an application called Ghostlab<\/a><\/strong>. Let\u2019s take a look.<\/p>\n

Getting Started<\/h2>\n

Ghostlab<\/strong> costs US$49 for a single license, which can be used on two computers. There is also a trial version available with all features enabled, so you can try it out before deciding to buy.<\/p>\n

It is available for Windows and OS X. Download it here<\/a>. Install it according to your OS procedures, then launch it.<\/p>\n

\"Launched<\/figure>\n

We are now ready to use Ghostlab.<\/p>\n

Project Configuration<\/h3>\n

The first thing to do is add our projects to Ghostlab. There are two options: drag-and-drop the project directory onto the application\u2019s window, or copy-and-paste the project\u2019s URL address, like so.<\/p>\n

\"Adding<\/figure>\n

Ghostlab registers all the added projects as follows:<\/p>\n

\"Registered<\/figure>\n

You can also drag-and-drop the project list to switch their positions.<\/p>\n

\"Switching<\/figure>\n

Furthermore, each project can be configured. Hover your mouse cursor over the project icon, and it will turn into a gear icon. Click on the icon to expand it for configuration options displayed in an array of tabs.<\/p>\n

Within these tabs, you can turn the Ghostlab server on or off, select which browser to view the project on, change the project title or the URL, and more.<\/p>\n

\"Configuration<\/figure>\n

Turning On The Server<\/h3>\n

As mentioned earlier, Ghostlab is equipped with a built-in server that works for both static sites<\/strong> (only HTML and CSS) and dynamic sites<\/strong> built with PHP, Ruby, etc. Once the configurations are set up, you can turn on the server by simply clicking the arrow icon next to the project list.<\/p>\n

\"Starting<\/figure>\n

When the server is \u201con\u201d, you will see a notification showing the server URL and port<\/strong> at the bottom-left of the application window. Click on the rocket icon to launch the project in the default browser, or click the browser icon below the rocket to select other browsers. There\u2019s no need to copy-paste the URL.<\/p>\n

\"Previewing<\/figure>\n

Note:<\/strong> The server can only be active for one project at a time. If you turn on the server for another project, it will switch off for the previous project and turn on for the newly opened one.<\/p>\n

Connecting Devices<\/h3>\n

When you launch the project in any browser, Ghostlab will register it on the right sidebar.<\/p>\n

\"Connected<\/figure>\n

You can debug the project on each of these connected browsers\/devices using the Ghostlab built-in code inspector<\/em>. Click on the < ><\/code> icon, and the code inspector<\/em> (which looks similar to Chrome\u2019s) will pop up.<\/p>\n

When you navigate through the DOM tree, the respective elements in the browser are highlighted.<\/p>\n

\"Built-in<\/figure>\n

And ultimately, you can also perform \u201csynchronized testing\u201d<\/strong> similar to Browser Sync. It automatically refreshes all the connected browsers whenever a change is made. User interactions like scrolling, clicking, and filling out forms are also synchronized in real-time.<\/p>\n

\"Synchronized<\/figure>\n

Final Thoughts<\/h2>\n

We have shown you how to perform \u201csynchronized testing\u201d using both a command line tool, Browser Sync, and an application with a graphical interface. Both tools serve their purpose well. My only complaint with Ghostlab is that the UI seems a bit out of place in OS X; it probably looks fine in Windows though.<\/p>\n

Ultimately, it is up to you to decide which tool best suits your workflow and budget.<\/p>","protected":false},"excerpt":{"rendered":"

In the previous post, we showed you how to perform synchronized testing using Browser Sync. As you might have seen, \u201csynchronized testing\u201d can greatly enhance your development workflow by testing mobile-optimized websites across multiple browsers and devices simultaneously. Interactions within the browsers, such as refreshing, clicking, and filling out forms, are reflected across the browsers…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[3414],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Perform Synchronized Testing Using Ghostlab - Hongkiat<\/title>\n<meta name=\"description\" content=\"In the previous post, we showed you how to perform synchronized testing using Browser Sync. As you might have seen, "synchronized testing" can greatly\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Perform Synchronized Testing Using Ghostlab\" \/>\n<meta property=\"og:description\" content=\"In the previous post, we showed you how to perform synchronized testing using Browser Sync. As you might have seen, "synchronized testing" can greatly\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-15T07:01:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-27T17:35:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/sychronised-testing-with-ghostlab\/launched-app.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Perform Synchronized Testing Using Ghostlab\",\"datePublished\":\"2014-05-15T07:01:38+00:00\",\"dateModified\":\"2024-06-27T17:35:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/\"},\"wordCount\":628,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sychronised-testing-with-ghostlab\\\/launched-app.jpg\",\"keywords\":[\"toolkit\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/\",\"name\":\"How to Perform Synchronized Testing Using Ghostlab - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sychronised-testing-with-ghostlab\\\/launched-app.jpg\",\"datePublished\":\"2014-05-15T07:01:38+00:00\",\"dateModified\":\"2024-06-27T17:35:47+00:00\",\"description\":\"In the previous post, we showed you how to perform synchronized testing using Browser Sync. As you might have seen, \\\"synchronized testing\\\" can greatly\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sychronised-testing-with-ghostlab\\\/launched-app.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sychronised-testing-with-ghostlab\\\/launched-app.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sychronised-testing-with-ghostlab\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Perform Synchronized Testing Using Ghostlab\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Perform Synchronized Testing Using Ghostlab - Hongkiat","description":"In the previous post, we showed you how to perform synchronized testing using Browser Sync. As you might have seen, \"synchronized testing\" can greatly","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/","og_locale":"en_US","og_type":"article","og_title":"How to Perform Synchronized Testing Using Ghostlab","og_description":"In the previous post, we showed you how to perform synchronized testing using Browser Sync. As you might have seen, \"synchronized testing\" can greatly","og_url":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-05-15T07:01:38+00:00","article_modified_time":"2024-06-27T17:35:47+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/sychronised-testing-with-ghostlab\/launched-app.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Perform Synchronized Testing Using Ghostlab","datePublished":"2014-05-15T07:01:38+00:00","dateModified":"2024-06-27T17:35:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/"},"wordCount":628,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sychronised-testing-with-ghostlab\/launched-app.jpg","keywords":["toolkit"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/","url":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/","name":"How to Perform Synchronized Testing Using Ghostlab - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sychronised-testing-with-ghostlab\/launched-app.jpg","datePublished":"2014-05-15T07:01:38+00:00","dateModified":"2024-06-27T17:35:47+00:00","description":"In the previous post, we showed you how to perform synchronized testing using Browser Sync. As you might have seen, \"synchronized testing\" can greatly","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/sychronised-testing-with-ghostlab\/launched-app.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/sychronised-testing-with-ghostlab\/launched-app.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/sychronised-testing-with-ghostlab\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Perform Synchronized Testing Using Ghostlab"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5d3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=20029"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20029\/revisions"}],"predecessor-version":[{"id":72211,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20029\/revisions\/72211"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=20029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=20029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=20029"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=20029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}