This question already has answers here:
How to open the correct devtools console to see output from an extension script?
(3 answers)
Closed 2 years ago.
I use console.log heavily to debug when writing JS. I am trying to use it in writing chrome extensions but it is not working. Is there some trickery involved here???
popup.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.10.0.custom.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</head>
<body style="width: 200px">
</body>
popup.js
console.log('test1');
$(document).ready(function() {
console.log('test2');
});
Neither of these appear in the JS debugger.
I had this problem as well initially! Make sure you have correct developer tools window opened... I mean, you might have opened the developer tools window for the main page rather than the extension's page (ie. popup.html).
To open the developer tools window for inspecting the popup, right click on the popup and then click 'inspect element'... That opens the right developer tools window.
I had made this stupid mistake initially and was stuck.. :)
Related
I need some help. I decided to create a home FTP server for my family. I hit a roadblock a few hours ago. When I was creating my home page, I wanted to test it in Chrome. I linked a css file to it aswell. I expected to see the test webpage, which was a h1 with the text hello. What actually happened was the fact that it downloaded my html file, and when I opened that in Chrome, I saw my page without the css. I've tried everything to speak of on this site and I even checked page 2 of Google. Here's my code, I'm running FTP on IIS 10.
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
As far as I know, chrome download the html page is right. Since you use chrome to access a ftp file, it is not a http connection to the server. The chrome will not directly show it.
If you want to show the html page in the browser, you should use IIS website instead of ftp site.
More details about how to create a IIS web site, you could refer to below article.
https://support.microsoft.com/en-sg/help/323972/how-to-set-up-your-first-iis-web-site
i guess you are putting it in a wrong format
as https://www.w3schools.com/css/css_howto.asp says
<link rel="stylesheet" type="text/css" href="mystyle.css">
The twitter timeline is not shown properly in the web browser even though it is the original code from the twitter publish website.
At first the timeline was shown as it should. Somehow after I refreshed the site with F5 it didn't work at all. Somehow at the X time I refreshed it worked. When I restarted my computer and wanted to work on the file again it didn't work. I'm not an expert on HTML but I think the problem may be in the script tag.
I looked up other questions here on stackoverflow but none of them helped me. My code had no problems before I tried out without the timeline.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<a class="twitter-timeline" href="https://twitter.com/ErinCorleyGray/lists/stackers?ref_src=twsrc%5Etfw">A Twitter List by ErinCorleyGray</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
A timeline of the twitter list should be displayed instead I get only the text: "A twitter list by ..."
I just pasted your code onto a new html document and viewed it on my Chrome browser and I did not have an issue with viewing the timeline. I have attached a screenshot of what I see. Maybe it is a browser issue? screenshot of the top of the page
I am trying to import the contents (import the reference of the CSS and JavaScript files) of a particular html page, named "helper.html" to another html page,named "navigation.html". It works on the emulator (the reference of the CSS and JavaScript files of the "helper.html" can be imported) but NOT on the device (the device I am using is Android tablet).
My project directory looks like this:
www
-templates
navigation.html (inside templates folder)
-helper.html (inside www)
In my "navigation.html", I have the following code snippet:
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="helper.html">
</head>
<body>
<ion-view view-title="Navigation">
<ion-content>
// SOME CODES
</ion-content>
</ion-view>
</body>
</html>
In my "helper.html", I have the following code snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/pathFindingstyle.css" />
<!-- Some JS files to be loaded, but I am not posting them here-->
</head>
<body >
<div id="draw_area"></div>
<div id="stats"></div>
</body>
</html>
Can someone tell me a way how I could make this work on the android device? Thanks!
Old versions of Cordova for Android (<= 4.4.4) don't use Blink, the Chromium / Chrome web engine, or use an old version of Blink (< 36) that doesn't implement Web Components -including HTML Imports- for HTML rendering.
Therefore you'll need to upgrade Android to version 5+, or to use a more recent device to get a native implementation.
As a workaround, you can try to use the webcomponentsjs polyfill, with the HTMLImports.js file which emulates HTML Imports (though I don't know if it will work on your Android version).
I am trying to inject css file url from my angular controller to my index.html:
<html ng-cloak ng-controller="mainCtrl">
<head>
...
<link ng-href={{css}} rel="stylesheet" type="text/css" css-load css="css">
...
</head>
...
<html>
As my page loads I can see in the DOM Explorer that my css url injected correctly to the ng-href attribute, but no css changes occurred on the page.
I am sure that the url is correct, since - if I add the url explicitly to the link ng-ref I can see the changes on the layout.
The problem is, that I need to reference for each user a personal css as they log in, so I cannot know in advance what url I need to use.
This css injection works fine on Android and Ios though...
What is wrong with Chrome? I want to develop just a single html page. Without any server. Just one page. I know that I need web-server for using that page. But I need to just create a short simple html page with linked js and css files. And I can't do this, because chrome is too smart and I get the same error from chrome:
Not allowed to load local resource
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>ACAB</title>
<script type='text/javascript' src="./data_statistic.js"></script>
....