I am learning javascript in vscode and using liveServer extension to get my html and js runnning on chrome...and i see my js output in "inspect element->console" which works perfectly fine...now i have seen chrome developers tools integrated in vscode and you can open them in vscode from help and then selecting developers tools.....but thing is i dont get my js output there...how to do that....i am learning from tutorial on youtube--"https://www.youtube.com/watch?v=W6NZfCO5SIk" and he is doing the exact thing from the time stamp 16:11 (variable section), that i want.
i have tried changing the ports of liveserver and setting the default browser to null which eventually open edge browser.
all this happens when i go live with the live server extension.
i expect my js output on that console but i get this:
[Extension Host] [32mServing "c:\VCodeCpp\" at http://127.0.0.1:5500[39m
workbench.main.js:238 [Extension Host] [36mReady for changes[39m-------
and when change something in js file, it says
[Extension Host] [36mChange detected[39m c:\VCodeCpp\index.js----------
while the output in chrome is perfectly fine
It sounds like you are on the right track with the live server extension, from what I can tell in the video you linked what you are referring to is the Debugger for Chrome visual studio code extension.
This can be downloaded within visual studio code in the extensions panel after searching
"debugger for chrome"
Download through that link or directly within VS Code
If you use that along with the web server, You would just first need to link the debugger to the port the server is on you should see the output in the chrome-tools.
Follow this Guide on
Getting started with Chrome Tools in VS Code
I hope this helps, as I am still new to answering on SO but this looked like something I could make a solid attempt.
In addition to enabling the "debugger for chrome" extension, please check for the Javascript console.log () output in the VS Code "DEBUG CONSOLE" tab, instead of in the usual "TERMINAL" tab. You'll probably have to hit F5 for the output to show up.
This method "sorta" worked for me -- but it wasn't fully reliable: I didn't get all the output I expected. Still, I think it's how it's "supposed" to work.
I have a webpack 4 configuration that generates source maps for my app's JavaScript. While debugging my app in Chrome, the source maps get loaded so I can see my unimified code. I'll set a breakpoint in a function and in the Sources tab I'll make edits to the code. I hit CMD+S to save my edits.
Normally, I would expect Chrome to think for a little bit while it processes my edits and then I can continue debugging my session with my code changes.
But that doesn't happen. I get a little yellow icon next to my file in the Sources tab that says "Changes to this file were not saved to the filesystem". And the debugging session continues without my code changes.
I've tried different options like cheap-module-source-map and cheap-module-eval-source-map for the devtools option in my webpack config.
Any suggestions? Thanks!
I got something working!
I ended up posting my same question on reddit and got some help.
https://www.reddit.com/r/learnjavascript/comments/a98gh1/cannot_use_chrome_live_edit_with_webpack_source/
You need to add your project's directory to save changes in the
source.
Here are the steps:
Open dev tools
Click on the 3 vertical dots on the far-right beside X which brings up
a menu. Click on Settings
Click on Workspace
Add your Project's directory
Refresh the page, and you should be able to save your changes now.
Hope this helps.
Oddly enough, I was able to remove my Project's directory from the Workspace and STILL able to make Live Edits to my source maps!
Every other website I visit, the inspector works as expected:
But in many of the sites I'm editing within apache server (using xampp) somehow they doesn't show the "filename.css:lineNumber" data
Also, every change I try to do in the inspector in thse sites, doesn't do anything to the code shown in the source tab.
I've tried refreshing, hard refreshing with cache, closing and opening the tab, closing and opening chrome again. The same problem occurs.
In other sites the inspector works well, but not in many of the localhost sites.
Has someone experienced this before? Is there a way to fix this?
If you are using a client-side CSS generator library such as Lea Verou's excellent -prefix-free or client-side Less, you will not see source information as it has all been processed and reinjected as style elements.
Client-side Less has a property [dumpLineNumbers] to include source line info as a comment in the generated source. (I'm not sure if this will display in Chrome's inspector - but I think it might)
The only "fix" I know of for -prefix-free is to temporarily remove it, obtain the source info for reference, then put it back in.
I have had the exact same problem (not using a css generator), and it appears to be a known bug with the current version of Chrome, the solution is to use the more up to date Beta version known as Chrome Canary - Here's the link :)
https://www.google.co.uk/intl/en/chrome/browser/canary.html
Try to check what the format of your CSS file is. I had the same trouble with the UNIX and Macintosh formats. For example, try to open you CSS file in Notepad++ and in the bottom right corner of the window you'll see your current format. If you see UNIX or Macintosh there, click it with the right button of your mouse and change to DOS/Windows. Then save your file and refresh your page in Chrome. It definitely helped in my case.enter image description here
I have downloaded the zip from https://github.com/loopj/jquery-tokeninput and tried the demo.html in firefox and in chrome. In firefox after adding token cursor is being shown up:
version in 1.6.1
In google chrome after adding token cursor is NOT being shown up: But when we start typing cursor is shown.
I have tried the loopj version http://loopj.com/jquery-tokeninput/demo.html given there, cursor is being shown in google chrome also.
I have looked into js file but couldn't find anything.
How to fix this issue;
Final Edit: This bug was fixed in Pull Request #557.
UPDATED SOLUTION:
On line 725(ish), there is input_box.width(0), in the add_token method. By giving the input a width of zero, the cursor is hidden from view. I've set this to 1 in my project, which allows me to now see the cursor, I'm yet to find any negative effects, and from what I can see the worst that could happen would be a slightly premature linebreak, which in my implementation I can definitely deal with!
Hope that helps!
ORIGINAL ANSWER: I use a different theme for this plugin in Chrome, but haven't encountered this problem. I was going to suggest posting a bug report, but I guess this could be your post anyway?
Am I reading your post right that the demo's work correctly, just the file you downloaded doesn't? The Demo's run on version 1.6.0 - perhaps try replacing your .js file with that one, and see if that solves your problem as a temporary fix.
There is a bunch of images in a web page.
Other browsers do download them correctly, but Chrome doesn't.
In the developer's console, it shows the following message for each image:
Failed to load resource
As mentioned before, problem appears only in Chrome.
What is it?
I recently ran into this problem and discovered that it was caused by the "Adblock" extension (my best guess is that it's because I had the words "banner" and "ad" in the filename).
As a quick test to see if that's your problem, start Chrome in incognito mode with extensions disabled (ctrl+shift+n) and see if your page works now. Note that by default all extensions will be already disabled in incognito mode unless you've specifically set them to run (via chrome://extensions).
Check the network tab to see if Chrome failed to download any resource file.
In case it helps anyone, I had this exact same problem and discovered that it was caused by the "Do Not Track Plus" Chrome Extension (version 2.0.8). When I disabled that extension, the image loaded without error.
There is also the option of turning off the cache for network resources. This might be best for developing environments.
Right-click chrome
Go to 'inspect element'
Look for the 'network' tab somewhere at the top. Click it.
Check the 'disable cache' checkbox.
Kabir's solution is correct. My image URL was
/images/ads/homepage/small-banners01.png,
and this was tripping up AdBlock. This wasn't a cross-domain issue for me, and it failed on both localhost and on the web.
I was using Chrome's network tab to debug and finding very confusing results for these specific images that failed to load. The first request would return no response (Status "(pending)"). Later down the line, there was a second request that listed the original URL and then "Redirect" as the Initiator. The redirect request headers were all for this identical short line of base64-encoded data, and each returned no response, although the status was "Successful":
GET data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg== HTTP/1.1
Later I noticed that these inline styles were added to all the image elements:
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
Finally, I did not receive any "failed to load resource" messages in the console, but rather this:
Port error: Could not establish connection. Receiving end does not exist.
If any of these things is happening to you, it probably has something to do with AdBlock. Turn it off and/or rename your image files.
Also, because of the inline CSS created by AdBlock, the layout of my promotions slider was being thrown off. While I was able to fix the layout issues with CSS before finding Kabir's solution, the CSS was somewhat unnecessary and affected the flexibility of the slider to handle images of multiple sizes.
I guess the lesson is: Be careful what you name your images. These images weren't malicious or annoying as much as they were alerting visitors to current promotions and specials in an unobtrusive way.
If the images are generated via an ASP Response.Write(), make sure you don't call Response.Close();. Chrome doesn't like it.
I was getting this error, only in Chrome (last version 24.0.1312.57 m), and only if the image was larger than the html img. I was using a php script to output the image like this:
header('Content-Length: '.strlen($data));
header("Content-type: image/{$ext}");
echo base64_decode($data);
I resolved it adding 1 to the lenght of the image:
header('Content-Length: '.strlen($data) + 1);
header("Content-type: image/{$ext}");
echo base64_decode($data);
Appears that Chrome dont expect the correct number of bytes.
Tested with sucess in Chrome and IE 9. Hope this help.
Facts:
I have disabled all plugins, and the problem still remains.
There are some sites, where the problem does not occour.
It's a known issue. See Issue 424599: Failed to load resource: net::ERR_CACHE_MISS error when opening DevTools on PHP pages and Stack Overflow question Bizarre Error in Chrome Developer Console - Failed to load resource: net::ERR_CACHE_MISS.
There is a temporary work around in Reenable (temporary) showModalDialog support in Chrome (for Windows) 37+.
Basically, create a new string in the registry at
HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures
Under the EnableDeprecatedWebPlatformFeatures key, create a string value with the name 1 and a value of ShowModalDialog_EffectiveUntil20150430. To verify that the policy is enabled, visit chrome://policy URL.
FYI - I had this issue as well and it turned out that my html listed the .jpg file with a .JPG in caps, but the file itself was lowercase .jpg. That rendered fine locally and using Codekit, but when it was pushed to the web it wouldn't load. Simply changing the file names to have a lowercase .jpg extension to match the html did the trick.
In Chrome (Canary) I unchecked "Appspector" extension. That cleared the error.
I updated my Chrome browser to the latest version and the issue was fixed.
It is due to ad-blocker.When project files names contains words like 'ad' then ad-blockers also block theses files to load.
Best solution is that never save any files with these name keys.
Removing the / from the path helped me to solve this problem.
See more at:
Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js