I started working with the vueJS2 relatively recently, now I'm studying the components and I had a question for the experts.
As far as I know, the VueJS processes the HTML using JavaScript, and it is because of this that the rest of the HTML code is not visible.
Please correct me if I'm wrong.
view in Chrome browser
view in IDE
view in Chrome Source Code
You can see there is no <button> tag in Chrome source code
How can I make it so that when I use the components, I want to display the HTML completely FULL, as an example here:
source code of my jQuery DataTable
Another question related to the topic. Does it matter that the components reduce the whole HTML to 'one line ' for a search in the browsers?
You can't see the HTML within the source code because the compilation takes place after the source code has already been generated.
What you can do however is right clicking your component and selecting Inspect within Chrome. This works because the elements tab shows a live representation of your code, so therefore it also shows the compiled component markup.
If you want further debugging tools you can check out the Vue devtools Chrome extension.
This does not work like jQuery for the reason that Vue takes a data-driven approach. Your data is in charge of what you markup is going to look like. jQuery usually enhances the HTML that is already there.
Related
I am looking for a visual HTML editor script that works in browser basically. Its initial content will be generated from an existing URL and all the changes which will be done by the user, should be exportable in some kind of format. The aim here is reaching the final look later by applying this exported data.
The user here will be non-technical end user. The editor can be similar to WYSIWYG so user can switch between preview and code. The editor should not rely on some kind of special CSS/JS frameworks, it should be able to read from CSS and JS files directly from URL while generating the page.
There are lots of visual editors out there with lots of cool stuff. Some are using drag-and-drop UI elements, some are meant to work just with Bootstrap etc. But so far I could not find something I can use.
So if existing tools are not enough, I need to find a way of generate same result by comparing the outputs.
Beside taking diff of the contents, is there any method for generating the exportable changes for reapplying to initial HTML later?
using diff may actually work but it may generate lots of bugs while working with js frameworks
If you are looking for what I think then.. https://ckeditor.com/ Check this one. I have used this HTML editor in a website. It changes the initial HTML and works like the way wordpress HTML editor works.
TL;DR: need to find UI element from website on React JS code
Basically I'm working on a project where I need to put id tags on certain ui elements in a website. The code is written in React JS but there are a lot of pages and I cannot find which one each ui element is in. Is there a way that I can use chrome dev tools while on the website to find what page the code is for each specific ui element?
(Sorry if the terminology is wrong/confusing, I'm new to coding)
I'm not ok if I understand what you want, but if you wanna to get UI elements that exists inside React Component, I suggest you to use React Dev Tools:
https://github.com/facebook/react-devtools
If you want more help, please share a code snippet to try to help you more
I have a very strange problem with a web page. The source HTML code is correct, but when I use Chrome's developer tools to inspect the page (font is much smaller than it should be), I find 8 HTML small tags added to my code. These tags do not exist in the source code, however. So, I suspect that I have a Javascript file writing these tags to the page. To add to the mystery, I do not have this problem on our dev or QA servers, only in production.
How can I find the source of these tags on this page? I have no idea even if this is a script causing the problem. To make matters worse, this is not a page I built, but rather inherited, and the state of the HTML and Javascript code is horrendous. This page has a tangled web of Javascript files, so it is really difficult for me to debug this problem.
any help, tips or suggestions would be greatly appreciated. Thanks!
You can right click on parent node and select Break on -> subtree modifications. This will create a breakpoint when child nodes change. Then in Sources tab, where it breaks you can see the CallStack, all methods called to get that point.
I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.
This is in the header (set in the header for that particular blog):
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>
Then I think I need to call this function at the end of the page - I've put it in the footer:
scratchblocks.renderMatching('pre.blocks');
NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.
Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.]
[http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2
Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it.
https://codeclubprojects.org/en-GB/scratch/memory/
I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.
Any help would be greatly appreciated.
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:
window.addEventListener("mercury:load", function(){
// do stuff
});
In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.
When analyzing a webpage, I usually open these js files one after another and then read the source code to determine which file added a certain portion of html in the final rendered page. Is there an easy way / tool to solve this problem?
No, there is not a tool to do such a thing. Understanding the code yourself or searching for specific key phrases in the HTML you're trying to source (such as a class name or tag name or piece of text) is the typical method.
It could work to grep for the common ways that the DOM is modified (.innerHTML property, .appendChild(), .insertBefore, etc... if it's plain javascript) or similar methods in whatever library is being used.
Partially, you may use Firebug in Mozilla and, viewing the HTML tab, right click some tags and tick "break on child addition/removal". And then reload the page. Javascript execution will pause at any changing of DOM inside the chosen element.