I mean If I can check the code (for lwc as js and html code) in salesforce without vscode. I can not see the code in developer console
Lightning Web Components are not accessible through the developer console.
If you need to extract the code from a LWC ing your org, then you can do so with the following steps:
Step 1. Go to workbench and login.
Step 2. Click on retrieve button.
Step 3. click on "Choose File" button and upload package.xml file.
<?xml version="1.0" encoding="UTF-8"?> <Package xmlns="http://soap.sforce.com/2006/04/metadata"> <types> <members>*</members> <name>LightningComponentBundle</name> </types> <version>45.0</version> </Package>
Step 4. click on next and retrieve metadata, it will give you all the LWC components exist in your org.
Step 5. click Download ZIP File.
You cannot view that in the developer console.
If you want to retrieve the code there are few options.
- Using vs code (this is the recommended way for development).
- Using salesforce CLI - (Internally used by VS code).
- Using Ant migration tools
- Using Workbench and package.xml file.
For LWC development, you need to set up your developer tools, here is the trailhead.
As per this Salesforce developer blog post :
You can only develop Lightning web components using the Salesforce CLI and an IDE (or text editor). The developer console is a convenient tool that’s used daily by many Salesforce developers. You can still use it to access Apex classes, Visualforce pages and Aura bundles; however, it’s not a full-blown IDE. Also, in its current form, the developer console can’t provide integrated support for much of the tooling that ships with the Lightning Web Components Salesforce Extension, like ESLint.
You’ll get the best developer experience using more robust tools like VS Code and the Salesforce Extensions, or Illuminated Cloud. Your users will also benefit because these tools can help you identify and avoid common issues in your code as you write, and before you even try to deploy to development environments.
So developer console is currently not supported for LWC, you can also check this open idea here
Technically, there is a way but it is weird and based on the aforementioned background processes:
This is obviously not ideal and would require a lot of effort to do continuously but it is an alternative in some cases where one needs to view the markup quickly without having to install the utilities and get the development environment up.
Found a very handy chrome extension for viewing and editing LWC's: https://chrome.google.com/webstore/detail/salesforce-lwc-editor/ehkpneicmpbdejpoancidgkejlkahjgo/related?hl=en-US
I am using this amazing chrome extension not for only LWC but for other stuff and the extension name is Salesforce advance Code Searcher.
You can refer here for its usage and demo.