As a beginner starting my first project, I wanted to download an extension so that I could see my code while coding it and do a split screen thing. So following instructions I got from chatgpt I installed the extension live server ( by ritwickdey) and when I clicked on its file, at the bottom right of the page there was a small symbol that says go live when you hover over it, I clicked and it directed to my web project live server which was fine now from there I have both my visual studio code and live web browser sever opened I go on VSC and right click on my HTML file specifically then click split to the right. I was expecting to have the live web browser split to the right vertically and adjustable but it wasn't it was my current HTML code but just copied and split to the right I tried other options from what it gave me before that remotely related to what I was trying to do like open with the live server but they didn't work. I tried some troubleshooting like copy-pasting the link into a different browser and trying again and closing the app and trying again. After that, I went searching for another way to do split screen I found one on a yt tutorial and started by going on the view option at the top left click on it, and from there going to the command palette then searching live server/open with the live server then from there I go on the HTML tab at the top right click then click split right I was expecting for it to work and have my live web server browser open but it didn't. Can anyone help me and tell me what I should do?
How do I make a live server split screen using visual studio code?
842 Views Asked by Your-neigbourhood -developer At
2
There are 2 best solutions below
Related Questions in VISUAL-STUDIO-CODE
- Is there a way to prevent vscode from forwarding ssh agent to remote dev container?
- flutter Null check error: did not show file and line number
- vscode, debug angular, first time, doesn't debug, 2nd time stops at main.js then it's ok
- trouble with creating a project for Pymakr in vscode
- Compiling c++ code by VS Code is always blocked by clang-tidy error 'Error running 'clang-tidy'
- Disable typescript in VS Code
- couldn't sign in visual studio code
- I can't add text to "Message" in VS Code when committing to Git
- Cannot type single backtick in VSCode
- WebScraping doesnt work, even without error
- Visual Studio Code keeps discovering python interpreters forever and vscode-server on remote is busy 100%
- vscode uses different cocoapods version when running a task
- Live server extension in VS Code works in background but do not pop the web browser
- How to recover deleted files from create vite react project
- Autocomplete not working for apache spark in java vscode
Related Questions in LIVESERVER
- How to use Live Server extention in VS code IDE to run NodeJs, Express Web App
- Some css being applied on live server only after file save
- How can Live Server in VS Code serve HTML files with other file extensions?
- Bug in angular while running in development mode(live server)
- VS Code Live Server Not Refreshing automatically
- How to display Hebrew text in html title and in body correctly in a simple way
- Firefox isn't refreshing CSS upon saving file & using Live Server Extension but Chrome does
- live-server vs code extension opens tabs at 75% zoom in chrome
- How to run CREATE DATABASE command on LIVE Laravel site through get request
- Tailwind CSS some classes not working after restart code editor
- Laravel Cannot Access Image Stored in assets Folder after Uploading in Server
- My Glsl shaders are not loading on Liveserver or Github pages
- Static web page on github codespaces
- Live server (five server) in VS Code the web page favicon not change and it used existing web page favion when I start live server
- Javascript fetch giving CORS error despite using GH pages and CORS Proxies
Related Questions in SPLIT-SCREEN
- Is there a way to programatically exit split-screen or free-form window mode in Android?
- Android how to detect apps running in split screen mode
- Using a usb camera and a Raspbery Pi Zero 2W to create a fake stereo image
- How to keep the windows casting ( WinKey + K) always open in the background so whenever i am using my tablet - I can connect right from the tablet
- How to identify the tabs for displayed code in split-screen views?
- Split-screen in Godot 3D with a single Scene containing 2 cameras
- How do I make a live server split screen using visual studio code?
- How to enable Split Screen Icon?
- Android “taskbar-style” launcher which doesn't obture a part from the application window
- I've Xamarin android application which redirects user to browser for login process. But on android 13, browser opening in split screen mode
- Animation while playing media with ExoPlayer
- startActivities to start a split screen is not working for Android 13 anymore
- unable to properly render a react split-screen component using grid and styled-components
- Getting vim to show the lines relative to other screen in splitscreen?
- Android: Failing to open an activity in adjacent screen in multiwindow
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
It looks like all you're trying to do is view both your code and your browser simultaneously.
You can do this by re-sizing your Visual Studio Code window and placing it on the left of your screen, then re-sizing your browser window and placing it on the right of your screen (or vice versa, depending on your preference).
Whenever you update your code (HTML, CSS, etc.) the Live Server extension will automatically refresh your browser window, allowing you to see your website.