The polymer app that is generated when "JavaScript Polymer custom element" is selected as the project type in Chrome Dev Editor's "New Project" dialog displays a blank screen when run.
Is this a bug or am I doing something wrong?
If it is a bug, then how would I get the polymer app to display something?
Judging by your description, it sounds like you are forgetting to refactor for CSP. Right click on your project name, and select Refactor for CSP. This will take a while, but when it's done, it will work.
Sorry for the delayed response.
Please try the up-to-date Chrome Dev Editor. It's possible that the mentioned template was broken and got fixed since you've submitted the question.
Also make sure that you either:
have index.html or demo.html selected when clicking the Run button; or
right-click on of them and select Run... from the context menu.
What might have happened is that you confused Polymer element with a Polymer app. The template that've you used generates an element. It also provides an example of the element's usage in form of demo.html, and a standard Polymer element description page (based on the core-component-page element that reads and displays elements properties from the metadata.html) in form of index.html. So you have to explicitly run one of those to see something. If you attempt to "run" the element itself (say, click the Run button with my-element.html selected), you will see a blank screen, just like with any other pure Polymer template, because there is no renderable HTML in there (it's called a template for a reason).
If you do indeed want a Polymer app, consider using JavaScript web app (using Polymer paper elements) or JavaScript Chrome app (using Polymer paper elements) project types.
Try at first, to run the bower update from your command line
bower install Polymer/core-elements --save
And you might also need to right click on your project directory from the right panel of chrome dev editor and select Refractor for CSP.
Possibly in the example app, the CDE project (bower.json level) was in a subdirectory of the directory that you imported into the editor. Try to import a level deeper instead.
Related
Question
The editor brackets can do that. Supposed that, when I click my html tag in my source code file, the browser would automatically highlight the section/div in the broswer like google chrome developer tools.
Step 1
Click my tag in my source code file
Step 2
the live server will automatically focus on the section I want
How could I make it in VSCode?
VS Code does not have a built-in live server. Whatever extension you are using for live server can implement this, however I am not aware of any ones that do currently. Consider filing a feature request against them for this
Look at Five Server extension.
I used to love this Live Preview of Brackets, mainly for two unique features unlike many other editors and extensions:
It shows the preview live, literally. It doesn’t wait for file save to show the changes.
Highlights the section in the preview, corresponding to the html tag in which the cursor is placed currently.
I have been looking for a similar VS Code extension for a while.
Finally found it, JUST NOW.
The Chrome "Inspect element" HTML editor is very easy to use with lots of cool features, I love the collapsible elements, highlighting, and live updates so I can see exactly what's happening. Usually when I'm writing I'll create an empty file and open it in Chrome so I can start there. Unfortunately I have to copy everything to the document whenever I want to save and if I accidentally click on a link I lose everything. Is there an extension or something I can use to save the file (Maybe even to google drive?) I've recently accidentally lost a bunch of work a couple times in a row so I need to change something. I've tried brackets, atom.io, shiftedit, and codepen but none of them have the convenience and features of Chrome's console.
Thanks
You can use the Workspaces feature to work with files from DevTools so changes will persist to your computer automatically. Works with all source file types.
Check out Snippets in Chrome DevTools. The code snippets are stored in the browser, and you can run them on any page/site. I find them very useful myself.
You see the DOM in the "Elements" panel. The page may have JS that changes the DOM Tree.
So what you see in the Elements panel is not the source HTML. Therefore you can't just change things in the elements panel and save the changes to your HTML file.
In the starter-kit when I run using 'gulp serve' and enter an url with more than one level path for e.g. localhost:5000/register/user then it fails. It basically looks for elements.html in localhost:5000/register/elements/elements.html rather than localhost:5000/elements/elements.html.
However when I open the link by clicking from another page, it works. Any idea how to make this work when I enter the url ?
Solution 1:
Are you implementing your own logic for the register page? Or are you working off of a tutorial? Because that page does not exist in the default Polymer Starter Kit (PSK). Please add a comment to this answer.
If you have implemented a register page, edit app/elements/routing.html to define the routing rules for the page.
Solution 2:
Do you have the hashbang rule enabled still? When I run gulp serve and then click the Users nav menu item it takes me to http://localhost:5000/#!/users.
So if you still have the following rule enabled in routing.html:
// add #! before urls
page({
hashbang: true
});
Perhaps that is messing you up. Try setting hashbang to false.
I've got a problem getting the "real" source code from a website:
http://sirius.searates.com/explorer
Trying it the normal way (view-source:) via Chrome I get a different result than trying it by using inspect elements function. And the code which I can see (using that function) is the one that I would like to have... How is that possible to get this code?
This usually happens because the UI is actually generated by a client-side Javascript utility.
In this case, most of the screen is generated by HighCharts, and a few elements are generated/modified by Bootstrap.
The DOM inspector will always give you the "current" view of the HTML, while the view source gives you the "initial" view. Since view source does not run the Javascript utilities, much of the UI is never generated.
To get the most up-to-date (HTML) source, you can use the DOM inspector to find the root html node, right-click and select "Edit as HTML". Then select-all and copy/paste into your favorite text editor.
Note, though, that this will only give you a snapshot of the page. Most modern web pages are really browser applications and the HTML is just one part of the whole. Copy/pasting the HTML will not give you a fully functional page.
You can get real-time html with this url,bookmark this url:
javascript:document.write('<textarea width="400">'+document.body.innerHTML+'</textarea>');
If I am trying to edit some CSS in a huge project using the built-in developer tools in Firefox (which is accessed by right click and then selecting Inspect Element), is there a way to make those changes permanent?
Actually there is a big number of style sheets and and I could not locate this one property in them? I just could not find the file which contains this property, so I want to make permanent changes to the CSS from within the browser. Is there a way?
EDIT:-
To set up in Chrome first you have to add your project file to a "Workspace", Go into dev tools Ctrl+Shift+I then click on the settings gear and on the left yoou should see Workspace.
After you have added your Project folder into a workspace close out of options and click on the "Sources" tab (still in dev tools)
Now load up your index.html from your LocalHost like you normally would. In the sources panel you should see the currently loaded page and its resources. Right click on your .css file and click "Map To File System Resource" it will bring up a search box where you can search for the corresponding .css file from your actual project folder (that is now part of a workspace in Chrome). Once you make the link Chrome is smart enough to link up any other CSS and HTML files that are in your Project Folder.
Now you can make changes in the Elements tab in Chrome Dev Tools and they changes will persist. Also in the ELements tab it will show you what css file and what line any given Style is originating from!
The best thing about this is if you use Sass or Less then it will map your Scss files back to the CSS styles being processed in Chrome. (please note if using Sass and Less you have to have CSS source maps turned on)
If you don't want to do this by hand, there is a plugin for FF called Stylish that allows you to define rules-based style tweaks.
EDIT
I mention this only because it allows you to publish a set of style changes that any Firefox client can pick up and install to a specific installation. Since one can't "permanently" change the contents of remote style information, the only solution is to manipulate it on a semi-permanent basis on each user-agent that needs the changes.
You can use the Web Developer Toolbar for this matter. By going to CSS menu and then to 'Edit CSS' where you can edit and save your changes. Il also provides tools for identify which files are relevant and modify them manually. Also you may try Firebug extension where you can do similar things.
Links to both here:
https://addons.mozilla.org/firefox/addon/web-developer/
https://addons.mozilla.org/firefox/addon/firebug/
If you have installed Firebug you could install cssUpdater to simplify the process of saving changes.
https://addons.mozilla.org/firefox/addon/cssupdater/
You can take a look at userContent.css:
http://www-archive.mozilla.org/unix/customizing.html#usercss