Frontier Extension for VS Code
LG CNS frontier extension that enhances your development workflow by providing seamless integration between VS Code and Chrome DevTools, specifically designed for mobile web development and testing.
This extension is developed by LG CNS BuildCenter.
Features
- Mobile Preview: Launch a Chrome instance with mobile device emulation for testing your web applications
- Chrome DevTools Integration: Connects to Chrome using Chrome DevTools Protocol (CDP) for advanced debugging capabilities
- Cross-Platform Support: Works on both macOS and Windows
- URI Handler: Custom URI scheme support for external application integration
Requirements
- VS Code version 1.93.0 or higher
- Google Chrome browser installed
- Node.js and pnpm for development
Installation
- Install the extension from the VS Code marketplace
- Restart VS Code
- The extension will be automatically activated when needed
Extension Commands
This extension contributes the following commands:
Open Frontier Chrome: Opens a new Chrome instanceOpen Frontier Preview: Opens a new Chrome instance with mobile device emulation
Development Setup
# Install dependencies
pnpm install
# Compile and watch for changes
pnpm run watch
# Package the extension
pnpm run package
Technical Details
The extension uses the following key technologies:
- Chrome Remote Interface for DevTools Protocol integration
- VS Code Extension API
- TypeScript for type-safe development
Known Issues
Currently none reported. Please submit issues on the repository if you encounter any problems.
Release Notes
0.0.5
0.0.4
- Added URL input field for preview window
0.0.3
0.0.2
- Improved Chrome integration
- Enhanced mobile preview functionality
- Bug fixes and performance improvements
0.0.1
- Initial release
- Basic Chrome DevTools integration
- Mobile preview functionality
- URI handler implementation
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This extension is licensed under the MIT License.
Extension Settings
Include if your extension adds any VS Code settings through the contributes.configuration extension point.
For example:
This extension contributes the following settings:
myExtension.enable: Enable/disable this extension.myExtension.thing: Set to blah to do something.
Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
Working with Markdown
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
- Split the editor (
Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
- Toggle preview (
Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
- Press
Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.
Enjoy!
