Wikipedia:User scripts/Guide: Difference between revisions

Content deleted Content added
CSS files: Reworking this section. More explanation, more examples.
Debugging: Adding more explanation and an example of another way to load a test css file.
Line 231:
== Debugging ==
 
=== Previewing in Monobook/monobook.js ===
You can edit your script directly on your [[Special:MyPage/monobook.js|your <tt>/monobook.js</tt> page]] page, then pressclick «[Show preview»] and the new code is executed right away on the preview page.
 
=== Saving in Monobook/monobook.js ===
 
=== Saving in Monobook.js ===
If required elements are missing on the preview page (for example, your script does something on history pages), you will have to save the script in order to test it.
 
However it's not convinientconvenient and creates unnecessary load on the WikiMedia servers. (It usually involves waiting for some minute after you saved your /monobook.js, then [[Wikipedia:Bypass your cache|bypassing your browser cache]].)
 
=== Load from a localhost web server ===
 
The best and most recommended way is to insertload intoa JavaScript file from your <tt>local web server. (See below for an easy to install web server.) Put this string in your [[Special:Mypage/monobook.js<|/tt>monobook.js]]:
 
<source lang="javascript">
Line 249 ⟶ 250:
Then run any [[web server]] on your computer and create the <tt>wikipediatest.js</tt> file in the appropriate folder. The code inside this file will be executed as if it was inside your <tt>/monobook.js</tt>.
 
You can edit your <tt>wikipediatest.js</tt> file with any text editor, perhaps with syntax highlighting and other convenient features, then save the file and simply reload any Wikipedia page to see the results. (You don't need to wait and if your web server is nice or you set it right you don't even need to [[Wikipedia:Bypass your cache|bypass your browser cache]].)
 
For example you could use [http://www.ritlabs.com/en/products/tinyweb/ TinyWeb] which is less than 100kbyte on disk and doesn't require installation. Save and unzip <tt>tinyweb.zip</tt> for example into <tt>c:\Program Files\Tinyweb</tt>, then create a shortcut to <tt>tiny.exe</tt>, in shortcut properties add an argument — path to your folder with <tt>wikipediatest.js</tt> and any file <tt>index.html</tt> (required). Start TinyWeb with this shortcut; unload it with Task Manager.
Line 262 ⟶ 263:
</source>
'''Note!''' Such <code>@import</code> statements must come before any other declarations in your <tt>/monobook.css</tt>. But there can be <code>/* comments */</code> above them.
 
An alternative way is to put this line anywhere in your <tt>/monobook.js</tt> instead:
 
<source lang="javascript">
importStylesheetURI( 'http://localhost:8080/wikipediatest.css' );
</source>
 
Once you have finished the CSS code you either need to paste it into your <tt>/monobook.css</tt> if it is only for personal use. Or if it is for use by others then you should upload it to for instance [[Special:Mypage/yourscript.css|User:Yourname/yourscript.css]]. Then other users can import it by putting this line in their <tt>/monobook.js</tt>. Note, that is in their ".js", not their ".css".
Line 299 ⟶ 306:
However a full-blown Javascript debugger is much more convinient.
-->
 
== Software ==