I want to edit some parts of a .js file, but when I open it by notepad++ and change those parts, my site doesn't load at all. I see some unknown character in that file and think this problem refers to them. Somehow when I open the file and change it, that file doesn't match what it should be. (maybe the author places them in the file in order to protect his/her work or maybe I don't know the appropriate editor!!)
I'll send the link of that file and hope you can guide me to solve this problem:
http://students.sbu.ac.ir/r.bastani/wp-content/themes/ceevee/js/plugins.js
Note
As #AndroidNoobie metioned, this is a bunch of minified libraries, so be very carefully, when you edit this file.
To make editing with notepad++ a bit easier, you should install the extension JSTool. You can install extensions by clicking on Extensions -> Plugin Manager -> Show Plugin Manager. Then search for JSTool.
When installed JSTool and opened that JS file, press CTRL + ALT + M. This will format the code, and it is much better readable.
Regarding to you question: When you execute this file with Google Chrome, open the DevTool (F12) and navigate to the Console tab. This will give you a better overview of what concrete characters are unknown.
The characters you mentioned in line 23 and 43 should not be unknown to JS (curly braces and commas). Maybe formatting the code helps you. If not, please provide more information about what is unknown.
EDIT
The files seems not to be loaded completely:
There are also some other errors in the console:
Related
Actually I am a big fan of Google Chrome DevTools but it is very vast area for learning. I don't know much about it. I know how to out debug point, searching (Ctrl+Alt+F) and debugging, etc. basic things.
But in one of my project (its in asp.net MVC), it is requesting different views in Ajax request and in that views there are some js loading. I want to debug them but I am not able to. Actually I don't know where can I see them - especially the JS which is load after ajax call (its not inline javascript but a separate js files).
A workaround I found is - if I put 1 "debugger;" in that js file then it opens with some VM3012 or similar name with different numbers. Then only I can see the files. But I can not put debugger when I publish the code.
Any body knows then please help.
Thanks a lot for reading.
EDIT
as per first answer, I have tried but I can see that option "Open in Source panel" for normal JS file. But in my case my request is passing some query string to the js file like assets/components/utility/mycustom.js?_=1528282662460 and I am not able to see that option for such request. This help is appreciated but need more.
I know it's been 3 years but...
You can name the piece of javascript code inside the dynamic loaded file by adding the following above the code:
//# sourceURL=my-file-name.js
By doing it, that piece of javascript will be available in the file tree of the source panel and can also be found by the DevTools' CTRL+P shortcut.
Go to the network tab of the dev tools. You can filter by js files to help you find the file you need. Right click on the file you want and select Open in sources panel. You should now be able to put the breakpoint where you like as you are used to.
I’m new to the world of HTML. I wanted to create a local copy of the website I wanted to play around with by copying, pasting and saving the HTML source, as well as saving the webpage (with all the CSS, javascript, .ico elements etc.) and placing the HTML file in the same directory. However, when I opened up the HTML file, it was broken, and all styles were gone. Why is this so? Sincere apologies if this is a repeat, I didn’t really know what to search when looking for an answer. Thank you!
Without going into too much detail - Most modern websites are incredibly complex (JS, CDNs, webfonts, crossdomain content, etc etc) and are unlikely to look like anything reasonable when 'copy and pasted' to a local location.
If you're using Chrome I'd try the More Tools -> Save Page As feature which is slightly smarter about preserving dependencies, and even then it might not work very well.
Your best bet is to analyze the site inside of the browser, e.g. Chrome's Developer Tools and apply your learnings to a local stack you create from scratch.
It's kind of impossible to know what's going on without seeing the code or what (if any) errors are being produced by your browser.
I would suggest opening the JavaScript console in your browser to see if there are any errors. I could guess that the JS and CSS files are being referenced with an absolute path, and because you're serving them form the filesystem you need a relative path. But like I said, you're just going to have to debug this yourself.
The html file doesn't always contain everything it needs to render the page. Often css is stored in external files. The html file you copied should have a reference to the css that looks like.
<link rel="stylesheet" href="styles.css" >
It sounds like the stylesheets / scripts in the copied html are pointing to files that don't exist in your copied environment.
Could you post the way you have the files structured?
It could be that you have the filesystem set up differently than in the original webpage, ex/
wwwroot/
|-- index.html (which has stylesheet references to "css/styles.css")
|-- app.js
|-- styles.css
^ here the index.html file would be looking for styles.css in a folder called "css", but the styles.css file is not in that location.
(I'm aware this is not an actual answer, and may be more appropriate as a comment. I don't have enough reputation for commenting, so my apologies if I'm not following the StackOverflow ways of doing things.)
This could be the issue ideally because of the use of the external resources which are being used in that webpage and are not present on your local system.
You can check it from the developer console in chrome or whichever browser you are using.
Press F12 while viewing the webpage, this will open the Developer Tools
Click on the Console tab, here you can see all the errors and warnings that can cause any issue to that page.
Refer to the screenshot for the process:
You will be able to see errors in red color and warnings in orange color.
While I admit this is a pretty obscure problem, I'm posting this partly in case it is driving others crazy (too), partly because it might have wider ramifications, and partly because it may be an issue with my project settings.
In NB-8.1 I have several angular modules for handling a configuration-editing app. Since last week I have been trying to figure out why the navigator pane doesn't populate with these files. When I click on the source, the Navigator pane doesn't update. If the pane is newly opened, it shows <No view available>. If it is correctly showing another file, it remains showing the old file and effectively ignores the new file.
After experimenting, I found that it is specific to any js file with a filename prefix of "config" - which in this case was all the files for this particular app (config-service.js, config-ctrl.js, etc). Renaming the files with a new prefix (eg, "konfig-ctrl.js" or "x-config-ctrl.js") solved the issue.
Is this widespread, or a problem only with this project? If the latter, what should I look for? Help or advice appreciated.
This looks like a bug to me. AFAIK NetBeans is handling JS files with the config in name as possible Karma configurations and maybe it (although I can't remember if Karma has to be enabled or where exactly does it look for these candidate files...) I'd suggest to report a bug against NetBeans https://netbeans.org/bugzilla/enter_bug.cgi?product=web (component HTML Project)
I get a very similiar problem. Any js file with "conf" in the name (anywhere in the name) cannot be Run as javascript from Netbeans. Right-click on the file and Run is deactivated. Once I change the name to something else, it works.
I was trying to set up vim to work with JavaScript (any links about that appreciated), though didn't even know what's .vimrc file. So I deleted it. After removing and installing vim for about 10 times... I now don't know what exactly should I do. I believe there was some default settings that I lost. If I google for it I find bunch of different vimrc files, and if I put their content in my vimrc - whenever I start vim I get a lot of errors (assuming because I don't have all the plug ins). also don't think that I should\can create one and fill it little by little.
so.
1. How do I restore my original vim state (if you think this is smtn I should do) - ?
2. How do I set it up to work nicely with JavaScript files?
3. Possibly good vim tutorial?
OS Ubuntu 12.04 32-bit
Thank you guys.
vim beginner.
If you hadn't customised the file at all before you started, then if it existed at all, it must have been the default for new users.
When creating a new user account, the files in /etc/skel are used to populate the new user's home directory; thus the file you deleted can probably be restored to its original state with the following command:
cp /etc/skel/.vimrc ~/.vimrc
That is "copy the .vimrc file from the skeleton directory into my home directory".
If that doesn't help, or if the file you deleted was actually the system-wide defaults (normally /etc/vimrc or /etc/vim/vimrc) then you can probably get hold of the original file from your OS's package archive.
Since you are running Ubuntu 12.04, the relevant file list seems to be this one: http://packages.ubuntu.com/precise/i386/vim-common/filelist It doesn't seem to put anything into /etc/skel, but it does install an /etc/vim/vimrc which includes /usr/share/vim/vimcurrent/debian.vim.
You can download the package manually from here - the .deb file is just a .tar.gz, so tar -xzvf foo.deb will extract it for you to poke around. cd to a new empty directory before doing that, or you'll get very confused by the directories it creates!
Another thing to double check is that Ubuntu actually has multiple different vim packages, e.g. vim-tiny. See this question for how to check you've installed and selected the "full" version.
A .vimrc file is optional, and without it vim will use all of its defaults.
These defaults, however, are a bit conservative. If I recall correctly, vim defaults to being compatible with its predecessor (vi), which means no syntax highlighting, no line numbers, no ruler to tell you which mode you're in, no nothing.
Tim Pope's sensible vimrc is a good point to start off.
.vimrc usually is a config file under your $HOME directory. Itself is a vimscript too. You can put your config/mapping/plugin config/function... there, so that everytime you started your vim, the file would be automatically loaded. then you have a customized comfortable editor opened.
without this .vimrc, vim can start too, with default config though.
you can start vim and type :h vimrc to see the help doc of vimrc. You can take a vimrc from internet, try to understand the settings in the file. finally make your own vimrc. It will take veryveryvery long time to have a satisifed vimrc. I have used vim for about 10 years, last week I was still editing my vimrc file.
When you read others' vimrc settings, use :h foo to find the help information. In this way, you know "why I set this", not "I don't know what's going on, just copied it".
The charm of vim is, it is highly customizable. You can change it into plain notepad or programming IDE or mp3 player...
enjoy editing!
I originally posted this question on the code review forum, but was directed back to StackOverflow.
One contributor said that it was a problem with my Apache/server setup, but why only is one .js file affected? Problem described here:
I am a bit of a jQuery raven, I learn and take as needed forage about, and have no formal education, so your patience is appreciated.
I have a main issue that a jQuery plugin is not working on the server, but works locally.
I have checked for the usual oversights (having relative links not on the server, having all the required files on the server & case sensitivity issues), but it still wouldn't work.
I am not fluent in the FireFox debugging tools either, however I found a enormous anamoly which I suspect is causing the issue.
The plugin code is in it's own .js file, and in the "debugger" in firefox, when I click on the appropriate file, instead of previewing the .js file, it shows me the index PHP/HTML of the root for the domain.
For specific, real examples:
Example page where the plugin is failing: Here
Here are the error messages that I get under the "Console" tab in FireFoxe's tools:
SyntaxError: syntax error # http://bcw.se/3point0/js2013/imageScroller.js:1
TypeError: $(...).tinyscrollbar is not a function # http://bcw.se/3point0/index_debug_crousel_02.html:75
Use of Mutation Events is deprecated. Use MutationObserver instead. # http://code.jquery.com/jquery-latest.js:3492
And I presume the first two errors above are due to the anamoly and causing the failure, not directing properly to the right .js file, see screen dump below:
Can anyone help and is this the right forum?
Thanks in advance.
Your file is called ImageScroller.js and not imageScroller.js. Change that and it should work. (Apache should be case sensitive)
As imageScroller.js doesn't exist the url gets rewritten to the index page (probably by your .htaccess RewriteRule).
And the origin of the syntax error is kinda obvious - The browser tries to parse the fetched "js" file as JavaScript. But just isn't valid JavaScript ;).
Sincerely
Louis