Add jQuery into Adobe Brackets HTML Editor - javascript

I recently downloaded Adobe Brackets onto my computer, but I soon realized I wasn't able to use jQuery in the same way I had before. The jQuery isn't functioning at all in the program and it is vital to the way the program works.
Website is tiletap.neocities.org

You can use developer tools in the browser to debug problems like this. For example, in Chrome:
Open the menu and choose More Tools > Developer Tools
Select the Console tab
Are there any errors listed in red? If so, what do they say? If the error links to a specific line of code, you can click it to go to that code. Often looking at the code and the error message together makes it obvious what's wrong. (And if not, you can post those two pieces of information in your question here so others can help you).
Select the Network tab, then reload your page to get fresh information
Click the filter icon (it looks like a funnel) and type "jquery"
Are any of the network requests in the list shown in red? If so, then the browser was unable to load jQuery – make sure you're using the correct URL. If there are no jQuery items showing up in the list, make sure yous HTML <script> tag has the correct syntax.

Related

Is there a way in Chrome Dev tools to not jump through other JavaScript files?

What I'm saying is I'm trying to see how everything is working in a particular file. My problem is even stepping over a particular line or stepping out of a function, it will still take me to a function in a separate javascript file I have (such as jQuery, particular APIs, etc) when I don't care how that works since I know the issue is with my Javascript. Is there some way I can disable jumping through those or ignore seeing them work? Like I kind of said, I only want to see how much code works in one specific file, not how the whole thing compiles and runs altogether.
Open Chrome Developer tools, click 'Settings' in top-right corner:
Then, select 'Blackboxing' from the menu on the left:
And add patterns of all 3rd party libs which you'd like the debugger to skip.

Firefox inspector sees elements with IDs that javascript console cannot find

Trying to automate some tasks on a private web application. When I use a right click > Inspect Element on a form field for example, I am shown the Inspector panel, and the HTML element is shown, with its id right there. Problem is, if I run a
document.getElementById('theId_shown_on_the_inspector');
on the console, I just get null back. This web application relies on Java by the way.
Is there anything you can think off that may throw some light on this weird behavior? Basically I need to be able to automatically populate some fields and click on some buttons, but I cant if I am not able to detect them.
As shared by Jaromanda X, the page has iframes loading content from other URLs. Since I was working with GreaseMonkey, I did not include these URLs in the list of #includes, and using the Firefox console was not working either because you have to select and load those iframes into context (again as indicated by Jaromanda X).
Firefox provides enough details about the iframe URLs which to include in the GreaseMonkey script.

In a web browser, how to find out what triggers a hidden CSS class to appear in javascript?

As a freelance Wordpress developer I find myself thrown into projects where things are just 'broken' - with the problems regularly ending up being some kind of path issue/syntax error/etc in javascript.
I am in the situation right now where I am trying to get something that works in Site A to work on Site B. Basically the problem involves a mouse over event that causes a div with class name 'overlay-ico' to appear.
I'm sure there must be some kind of debug tool in Chrome, Firefox, etc that allows me to easily do this without reviewing all the source code?
Update:
I am familiar with being able to inspect the HTML (at least in a basic way), but I don't see how this shows me what would trigger an event to occur.
I am also know that there is a console, which as I understand it, only outputs errors, or something that has been explicitly directed to console output.
There must be somewhere in the code that is waiting for a mouse over event, that triggers 'overlay-ico' to appear. I'm sure I could do it if I did a search for 'overlay-ico' through all the source code - but I'm thinking there must be a faster way to find it.
In Windows, F12 opens the debug panel in most browsers.
In Chrome, you can inspect an element and then click into the Event Listeners tab in the right pane. That may show what you're after. It's hard to say without seeing it.

hide source of HTML page using javascript

I saw How to hide html source & disable right click and text copy? . One of the answers say use ctrl+u to view the source. But, using shortcut.js I can override ctrl+u as well. How do I view source in that case.
There is no way to prevent this. Someone could easily download the page using a non-browser tool like curl or wget, or log all HTTP traffic with Wireshark.
Use this. http://www.fiddler2.com/
Depends on the browser, but you can go to View -> Page Source in most to view the source. You cannot override that, however.
Furthermore, it's considered bad practice, and someone could also just as easily override the functionality through a tool like Firebug.
You can't stop people. It will be passed over the network, and sniffable through Fiddler, or someone can use a text based browser, or disable Javascript entirely, or look through their cache folder for the files they downloaded from your site.
You cannot stop people from seeing your source.
Well it's not possible to prevent users from seeing your script. But what you can do is to make it mire harder that user quits trying after few common methods.
I recommend you to load an initial page. Then load the whole page by using ajax. You can show a friendly loading gif too. This technique has following adanages,
browsers don't show generated HTML. Developers knw how to see this. But Normal user will not find it easily
if any user just press Ctrl+u it'll show the initial page.
wget, curl tool will not work at the first time.
additionally you can obfuscate the main page (which you are going to load by Ajax).
It's nearly impossible to stop people fetching the HTML from your website. I don't see any reason you'd want to hide it in the first place anyway. Hiding something?
Want to view the source no matter what javascript is being used to hide it? cURL the page.
Even if you disable right-click, you can still do a snapshot by pressing the prt scrn key on your keyboard then pasting it into an image editor.
You can't disable it. There are ways to encrypt it, but way more trouble than it's worth.
It's impossible to hide the source, HTML and Javascript are interpreted languages, that mean the browser will "compile" the code on the clients machine.

Can a piece of code be dynamically placed on every webpage a user visit

So we have a program that the user can use by copying text from a webpage they visit, alt+tabbing to the program, then pasting it as input. It would be more convenient for users to be able to do it directly in the site.
We were thinking of a panel that would be small and expandable, following them to each site they visit. Is this possible? Either a snippet of code that is auto pasted, or a JavaScript command called that would dynamically paste the code (is Scratchpad any help here, at least in FireFox).
We've never made a FF add-on, but it seems like if the dynamic panel idea falls through, an add-on would be the next best thing.
Basically, users should ideally be able to copy text, either enter a key combo or click a button, see the interface and paste in the text. Would either of these methods work?
A browser add-on or a userscript could certainly do this.
You can also write a userscript and use a user script compiler (such as this one) to convert it to a "true" Addon.
Alternatively your application could act as a HTTP proxy and inject it dynamically, but I'd guess that this would probably be more complicated than the other two approaches.
This site Polyvore used to do something similar, although in the 2 mins hunting around I could not find it, but I have used it and I think the technique was used by Google and Digg for a while. From what I recal it involved iframes and a bookmark in your browser.
Basically you could download a small piece of code that would sit in your bookmarks bar and this would allow you to navigate to a fashion website click on the bookmark copy a picture and insert it back into Polyvore.

Categories

Resources