remote-browser-support.mdx 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. ---
  2. title: "Remote Browser Support"
  3. description: "Remote browser support allows Cline to utilize a remote Chrome instance, leveraging authentication tokens and session cookies relevant to certain web development test cases."
  4. ---
  5. The Remote Browser feature in Cline allows the AI assistant to interact with web content directly through a controlled browser instance. This enables several powerful capabilities:
  6. - Viewing and interacting with websites
  7. - Testing locally running web applications
  8. - Monitoring console logs and errors
  9. - Performing browser actions like clicking, typing, and scrolling
  10. ## Remote Browser in Cline
  11. ### What is Remote Browser?
  12. Remote Browser allows Cline to view and interact with websites directly. This feature enables Cline to:
  13. - Visit websites and view their content
  14. - Test your locally running web applications
  15. - Fill out forms and click on elements
  16. - Capture screenshots of what it sees
  17. - Scroll through pages to see more content
  18. ### How to Use Remote Browser
  19. #### Basic Commands
  20. You can ask Cline to use the browser with simple instructions:
  21. - **Open a website**: "Use the browser to check the website at [https://example.com](https://example.com/)"
  22. - **Click on elements**: "Click the login button"
  23. - **Type text**: "Type 'Hello world' in the search box"
  24. - **Scroll the page**: "Scroll down to see more content"
  25. - **Close the browser**: "Close the browser now"
  26. #### Example Workflows
  27. **Testing a Web Application:**
  28. ```javascript
  29. Can you start my React app with "npm start" and then check if it's working properly at http://localhost:3000?
  30. ```
  31. **Analyzing a Website:**
  32. ```javascript
  33. Can you visit https://example.com and tell me what you think about its design and layout?
  34. ```
  35. **Filling Out a Form:**
  36. ```javascript
  37. Please go to https://example.com/contact, fill out the contact form with some test data, and submit it.
  38. ```
  39. ### Important Things to Know
  40. #### One Browser at a Time
  41. Cline can only use one browser at a time. If you want to visit a different website, you can either:
  42. - Ask Cline to navigate to a new URL within the same browser session
  43. - Ask Cline to close the current browser and open a new one
  44. #### Browser Must Be Closed Before Using Other Tools
  45. If you want Cline to edit files or run commands after using the browser, you must first ask it to close the browser:
  46. ```javascript
  47. Close the browser and then update the CSS file to fix the alignment issue we saw.
  48. ```
  49. #### What Cline Sees
  50. The browser has a fixed viewport size (900x600 pixels by default), similar to a small laptop screen. Cline will share screenshots after each action so you can see exactly what it sees.
  51. #### Console Logs
  52. Cline captures browser console logs, which can be helpful for debugging web applications. These logs are included with each screenshot.
  53. ### Common Use Cases
  54. - **Web Development**: Test your websites and web applications
  55. - **UI/UX Review**: Get feedback on website design and usability
  56. - **Content Research**: Have Cline browse websites to gather information
  57. - **Form Testing**: Verify that forms work correctly
  58. - **Responsive Design Testing**: Check how websites look at different screen sizes
  59. ### Troubleshooting
  60. - **If a website doesn't load**: Try providing a direct URL with the http:// or https:// prefix
  61. - **If clicking doesn't work**: Try describing the location of the element more precisely
  62. - **If the browser seems stuck**: Ask Cline to close the browser and try again
  63. ### Using Remote Browser with VS Code in WSL
  64. When running VS Code in WSL, you'll need to configure Windows to allow WSL to connect to Chrome. Follow these steps:
  65. #### Open PowerShell as Administrator and Run:
  66. ```powershell
  67. # Allow WSL to connect to Chrome's debugging port
  68. New-NetFirewallRule -DisplayName "WSL Chrome Debug" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow
  69. ```
  70. #### Configure Cline in VS Code:
  71. 1. Open VS Code settings
  72. 2. Search for "Cline: Chrome Executable Path"
  73. 3. Set the value to the path of your Chrome executable (e.g., `C:\Program Files\Google\Chrome\Application\chrome.exe`)
  74. Cline should now be able to use the Remote Browser feature from within WSL.