Live preview not working at all on my mac.

HunterJB commented 6 years ago

Prerequisites

[ yes ] Can you reproduce the problem with Debug -> Reload Without Extensions?
[ yes ] Did you perform a cursory search to see if your bug or enhancement is already reported?
[ yes ] Did you read the Troubleshooting guide?

For more information on how to write a good bug report read here For more information on how to contribute read here

Description

[Description of the bug or feature]

Even if I re-install Brackets and try to live preview the file that you are given, a pop up comes to the screen saying to open an index.HTML file to use live preview. Nothing works at all.

Steps to Reproduce

[First Step] Install Brackets
[Second Step] Hit live preview
[and so on...] Get the error message Expected behavior: [What you expected to happen]

Actual behavior: [What actually happened]

Versions

I am using Mac OS High Sierra Version 10.13.2

Brackets Version: Release 1.12 build 1.12.0-17621 (release d3b783b99) build timestamp: Thu Feb 01 2018 03:32:03 GMT-0800

Copyright 2012 - present Adobe Systems Incorporated and its licensors. All rights reserved. Please include the OS and what version of the OS you're running. Please include the version of Brackets. You can find it under Help -> About Brackets (Windows and Linux) or Brackets -> About Brackets (macOS)

I just run this and it does not work. This is the code given to me once I download it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 3, from LayoutIt!</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  <head>
  <body>

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                         <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                    </button> <a class="navbar-brand" href="#">Brand</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Link</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li class="dropdown">
                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Action</a>
                                </li>
                                <li>
                                    <a href="#">Another action</a>
                                </li>
                                <li>
                                    <a href="#">Something else here</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">Separated link</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">One more separated link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div> 
                        <button type="submit" class="btn btn-default">
                            Submit
                        </button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li class="dropdown">
                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Action</a>
                                </li>
                                <li>
                                    <a href="#">Another action</a>
                                </li>
                                <li>
                                    <a href="#">Something else here</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">Separated link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </nav>
            <div class="jumbotron">
                <h2>
                    Hello, world!
                </h2>
                <p>
                    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                </p>
                <p>
                    <a class="btn btn-primary btn-large" href="#">Learn more</a>
                </p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>
                Heading
            </h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>
                Heading
            </h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>
                Heading
            </h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
            <p>
                <a class="btn" href="#">View details »</a>
            </p>
        </div>
    </div>
</div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  <body>
<html>

sobisht commented 6 years ago

@HunterJB The file that you have created is outside the project root folder. That is the reason for the error. You can either open the folder containing the new file as your root folder or you can disable "File-> Enable Experimental Live Preview". Then live preview won't give an error.

HunterJB commented 6 years ago

I tried that too and it does not work. I am getting desperate here, could you please send a file that would work for you? I can't get anything to work on it.

sobisht commented 6 years ago

@HunterJB Could you send a snapshot or gif, reproducing the issue.

petetnt commented 6 years ago

Thanks for helping out @sobisht 🙏

HunterJB commented 6 years ago

screen shot 2018-02-23 at 8 52 47 am screen shot 2018-02-23 at 8 53 01 am

sobisht commented 6 years ago

@HunterJB Can you confirm which version of brackets are you using and also if this issue is occurring in latest version (i.e. 1.12). I am previewing index.html in "Getting Started" folder and I am not getting this error.

HunterJB commented 6 years ago

alright, I looked at my Brackets version and it was 1.11 so I downloaded 1.12 and hit the live preview in the "getting started" and it still wont do live preview.

sobisht commented 6 years ago

@HunterJB I have done following steps to launch preview in Brackets 1.12:

Opened brackets and selected "Getting Started" folder as my working folder.
From the "Getting Started" folder, I opened file "index.html" and clicked on live preview button. It shows the preview.
I enable the "Experimental Live Preview" by selecting File->Enable Experimental Live Preview. Now I click live preview button for the same file. Here also I am getting the preview.

Could you follow these same steps and provide a gif or video demonstrating the steps. That would be helpful.

HunterJB commented 6 years ago

WTF.zip If I didn't do something right please send a video back showing what I need to do. Thank you

sobisht commented 6 years ago

@HunterJB From the video and snapshots it seems you are setting the mode as xml. To launch the live preview it should be in html mode, not xml mode.

I have also highlighted the section.

inkedlievpreview_li

HunterJB commented 6 years ago

OMG! I'm a little pissed that it would start out like that! But it works now! Thank you soooo much!!!! I think I love you...

petetnt commented 6 years ago

Closing as solved. Thanks a for the help @sobisht !! :)

Mushmuch commented 5 years ago

Hi, could you add XML support to the live preview feature please?

This would allow to use Bracket for Component Content Management documents based on XML + CSS. The preview feature is really what makes Bracket stand out compared to other code editors. By the way, this is a really nice piece of software you guys are building.

avadhesh3824 commented 5 years ago

HI, I am facing the issue. I am using the html file. I am not able to view the result. This is properly working in Wifi access but when I access through the LAN connection it is not working. I am locating the file in my hard drive location. I am facing this issue in MAC Os (Sierra 10.12 & bracket 1.14). Pls suggest me how can I resolve the issue. Screen Shot 2019-08-30 at 5 36 10 PM

Thanking you.

Regards Avadhesh

adobe / brackets